@makabay/customizedmodal - npm Package Compare versions

Comparing version 0.1.18 to 0.1.19

package.json

 {
   "name": "@makabay/customizedmodal",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "files": [ "dist", "README.md" ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "repository": {
@@ -14,8 +17,7 @@ "type": "git",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "web-vitals": "^2.1.4"
+    "@testing-library/user-event": "^13.5.0"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build ",
     "test": "react-scripts test",
@@ -43,11 +45,6 @@ "eject": "react-scripts eject"
   "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-    "@babel/plugin-transform-react-jsx": "^7.23.4",
-    "@babel/preset-react": "^7.23.3",
-    "babel-cli": "^6.26.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
   },
@@ -54,0 +51,0 @@ "peerDependencies": {

README.md

@@ -1,7 +0,41 @@
-Hello, this is a modal component who can be customized.
-I will show you an example of use comented.
+Hello, this is a simple modal component who can be customized.
+(A style css is already apply on the component but you can customized the text notification and the button text)
 
-(You will have a style already apply on the component.)
+Quick start :
+1 - You need to install it with the npm command :
+npm i @makabay/customizedmodal
 
+2 - Import the component : 
+```js 
+import { CustomizedModal } from '@makabay/customizedmodal'
+```
+
+3 - Define a state who will be shared with the component initialize with boolean (false).
+```js 
+const [modal, setModal] = useState(false);
+```
+
+4 - Define the component : 
 ```js
+<CustomizedModal />
+```
+
+5 - When you define the component CustomizedModal don't forget to pass the childrens closeButtonText, textNotification, confirmationText, modalState, changeModalState
+
+Example :
+```js
+<CustomizedModal
+    closeButtonText={closeButtonTextData.closeButtonTextValue} 
+    textNotification={closeButtonTextData.textNotificationValue} 
+    confirmationText={closeButtonTextData.confirmationTextValue} 
+    modalState={modal}
+    changeModalState={setModal}
+/>
+```
+
+---
+
+I will show you an example of use case comented.
+
+```js
 // We will need to share the parent state to our "CustomizedModal" component
@@ -11,6 +45,6 @@ import { useState } from "react";
 // Components
-// Don't forget to import the CustomizedModal
+// Don't forget to import the CustomizedModal like this :
+import { CustomizedModal } from '@makabay/customizedmodal'
 
-
-// This App component can the component where you want placed the modal
+// You can replace this App component by the component where you want placed the modal
 export default function App () {
@@ -25,3 +59,3 @@ // Here we defined a booleen state hook
 
-    // For CustomizedModal (props) component, it will be your custom text button or message
+    // This is for CustomizedModal (props) component, it will be your custom text button or message
     const closeButtonTextData = {
@@ -35,5 +69,5 @@ closeButtonTextValue: 'Close',
         <>
-            {/* Trigger example for open modal */}
+            {/* A button (example) who will serve of trigger for open modal */}
             <button onClick={change}>
-                Open modal {modal ? 'true': 'false'}
+                Open modal {modal} {/* This is just for see the modal state */}
             </button>
@@ -43,4 +77,13 @@
             - This is the component -
-            He's in absolute position, better if it placed in top of the other components
+            He's in absolute position, it's better if it placed in top of the other components on the page
             */}
+
+            {/* 
+            - Explaination of the props component -
+            closeButtonText={} : will be the text on the close button - string/number
+            textNotification={} : will be the modal text message - string/number
+            confirmationText={} : will be the text on the confirm button - string/number
+            modalState={} : will be the state shared between your component (parent) and the CustomizedModal component (children) - hook (useState) the state initialize with boolean
+            changeModalState={} : will be the state method serve to change the state value - hook (useState) the setState function
+            */}
             <CustomizedModal
@@ -47,0 +90,0 @@ closeButtonText={closeButtonTextData.closeButtonTextValue}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dependency count

5

decreased by-16.67%

Dev dependency count

4

decreased by-55.56%

Number of lines in readme file

95

increased by82.69%

Worsened metrics

Total package byte prevSize

7519

decreased by-95.08%

Number of package files

5

decreased by-37.5%

Lines of code

97

decreased by-87.08%

Dependency changes

• - Removedweb-vitals@^2.1.4

• - Removedweb-vitals@2.1.4(transitive)