fix: Update licence in package.json and added ssr support

Author: anjuca154

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Francisco Hodge
+Copyright (c) 2023 keyvalue software systems
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -20,6 +20,8 @@ npm install @keyvaluesystems/react-inline-avatars
 
 You’ll need to install React separately since it isn't included in the package.
 
+Note for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.
+
 ## Usage
 
 React Inline Avatars can run in a very basic mode by just providing the `data` like given below:
@@ -209,6 +211,6 @@ The below code shows all the overridable styles:
 
 ```
 
-- `Avatar` - overrides the avatar (user image) style
-- `Name` - overrides the user name style
-- `ExtraCount` - overrides the style of additional count displayed at last bubble
+- `Avatar` - Overrides the avatar (user image) style
+- `Name` - Overrides the user name style
+- `ExtraCount` - Overrides the style of additional count displayed at last bubble

package-lock.json

@@ -24,12 +24,14 @@
     "url": "https://github.com/KeyValueSoftwareSystems/react-inline-avatars"
   },
   "author": "Keyvalue",
-  "license": "",
+  "license": "MIT",
   "homepage": "https://github.com/KeyValueSoftwareSystems/react-inline-avatars",
   "keywords": [
     "library",
     "starter",
-    "es6"
+    "es6",
+    "react",
+    "nextjs"
   ],
   "devDependencies": {
     "@babel/cli": "^7.20.7",

package.json

@@ -10,6 +10,11 @@
   img {
     border: 3px solid white;
     transition: all 0.3s;
+    &.elevateOnHover:hover {
+      transform: scale(1.1); 
+      z-index: 10;
+      position: relative;
+    }
     &:hover + .name{
         display: flex;
         position: absolute;
@@ -18,17 +23,8 @@
         justify-content: center;
       }
   }
-  .elevateOnHover {
-    cursor: pointer;
-    &:hover {
-      transform: scale(1.1);
-      z-index: 10;
-      position: absolute;
-    }
-  }
 }
 .imagesContainer {
-  position: relative;
   .circular{
     border-radius: 50%;
   }
@@ -53,11 +49,9 @@
     cursor: pointer;
   }
   .elevateOnHover {
-    cursor: pointer;
     &:hover {
       transform: scale(1.1);
       z-index: 10;
-      position: absolute;
     }
   }
 }

src/lib/inline-images/styles.module.scss

@@ -33,7 +33,8 @@ module.exports = {
     path: path.resolve(__dirname, 'build'),
     library: "InlineAvatars",
     libraryTarget: 'umd',
-    clean: true
+    clean: true,
+    globalObject: 'this'
   },
   externals: {
     'react': 'react'