fix : Update license in package.json and added SSR support (#13)

Author: anjuca154

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 aarathyKeyvalue
+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-dot-matrix-chart
 
 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 Dot Matrix Chart can run in a very basic mode by just providing the `dataPoints` like given below:
@@ -153,9 +155,9 @@ the below code shows all the overridable styles:
 />
 ```
 
-- `Container` - overrides the dot matrix chart container style
-- `DotsContainer` - overrides the dot matrix chart dots container style
-- `Dot` - overrides the style of each dot in the chart
-- `LegendContainer` - overrides the legend (details) container style
-- `LegendName` - overrides the legend name style
-- `LegendDot` - overrides the legend dot style
+- `Container` - Overrides the dot matrix chart container style
+- `DotsContainer` - Overrides the dot matrix chart dots container style
+- `Dot` - Overrides the style of each dot in the chart
+- `LegendContainer` - Overrides the legend (details) container style
+- `LegendName` - Overrides the legend name style
+- `LegendDot` - Overrides the legend dot style

package-lock.json

@@ -24,12 +24,14 @@
     "url": "https://github.com/KeyValueSoftwareSystems/react-dot-matrix-chart"
   },
   "author": "Keyvalue",
-  "license": "",
+  "license": "MIT",
   "homepage": "https://github.com/KeyValueSoftwareSystems/react-dot-matrix-chart",
   "keywords": [
     "library",
     "starter",
-    "es6"
+    "es6",
+    "react",
+    "nextjs"
   ],
   "devDependencies": {
     "@babel/cli": "^7.20.7",
@@ -71,7 +73,7 @@
     "react-scripts": "5.0.1",
     "sass": "^1.58.3",
     "sass-loader": "^13.2.0",
-    "style-loader": "^3.3.1",
+    "style-loader": "^3.3.3",
     "terser-webpack-plugin": "^5.3.5",
     "ts-jest": "^29.0.5",
     "ts-loader": "^9.4.2",

package.json

@@ -18,7 +18,7 @@ const useChartContainerWidth = (
   }, [...dependencyArray]);
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (typeof window !== undefined) {
       window.addEventListener("resize", updateContainerWidth);
 
       return () => {
@@ -29,7 +29,7 @@ const useChartContainerWidth = (
 
   const updateContainerWidth = (): void => {
     let widthValue;
-    if (typeof window !== "undefined") widthValue = findContainerWidth(id);
+    if (typeof window !== undefined) widthValue = findContainerWidth(id);
     if (widthValue) setWidth(widthValue);
   };
   return width;

src/lib/dot-matrix/custom-hooks/useChartContainerWidth.ts

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