@makabay/customizedmodal - npm Package Compare versions

@makabay/customizedmodal

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.1.20 to 0.1.21

package.json

		{
		"name": "@makabay/customizedmodal",
		"version": "0.1.20",
		"version": "0.1.21",
		"type": "module",
		"main": "dist/index.js",
		"module": "dist/index.js",
		"files": [
		"dist",
		"README.md"
		],
		"files": ["dist", "README.md"],
		"repository": {
		@@ -14,36 +12,25 @@ "type": "git",
		},
		"dependencies": {
		"@testing-library/jest-dom": "^5.17.0",
		"@testing-library/react": "^13.4.0",
		"@testing-library/user-event": "^13.5.0"
		},
		"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build ",
		"test": "react-scripts test",
		"eject": "react-scripts eject"
		"dev": "vite",
		"build": "tsc && vite build",
		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
		"preview": "vite preview"
		},
		"eslintConfig": {
		"extends": [
		"react-app",
		"react-app/jest"
		]
		"dependencies": {
		"normalize.css": "^8.0.1"
		},
		"browserslist": {
		"production": [
		">0.2%",
		"not dead",
		"not op_mini all"
		],
		"development": [
		"last 1 chrome version",
		"last 1 firefox version",
		"last 1 safari version"
		]
		},
		"devDependencies": {
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"react-scripts": "5.0.1",
		"web-vitals": "^2.1.4"
		"@types/react": "^18.2.55",
		"@types/react-dom": "^18.2.19",
		"@typescript-eslint/eslint-plugin": "^6.21.0",
		"@typescript-eslint/parser": "^6.21.0",
		"@vitejs/plugin-react-swc": "^3.5.0",
		"eslint": "^8.56.0",
		"eslint-plugin-react-hooks": "^4.6.0",
		"eslint-plugin-react-refresh": "^0.4.5",
		"sass": "^1.70.0",
		"typescript": "^5.2.2",
		"vite": "^5.1.0"
		},
		@@ -50,0 +37,0 @@ "peerDependencies": {

README.md

		@@ -0,1 +1,35 @@
		# React + TypeScript + Vite

		This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

		Currently, two official plugins are available:

		- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
		- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

		## Expanding the ESLint configuration

		If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

		- Configure the top-level `parserOptions` property like this:

		```js
		export default {
		// other rules...
		parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
		project: ['./tsconfig.json', './tsconfig.node.json'],
		tsconfigRootDir: __dirname,
		},
		}
		```

		- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
		- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
		- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

		---


		Hello, this is a simple modal component who can be customized.
		@@ -5,10 +39,16 @@ (A style css is already apply on the component but you can customized the text notification and the button text)
		Quick start :
		1 - You need to install it with the npm command :
		1 - If you want to use the library package, you need to install it with the npm command :
		npm i @makabay/customizedmodal

		Otherwise clone the project on github

		2 - Import the component :
		```js
		// On a Npm library package use case
		import { CustomizedModal } from '@makabay/customizedmodal'

		// On github clone use case (from ./example/App.tsx)
		import CustomizedModal from '../lib/components/CustomizedModal';

		```

		3 - Define a state who will be shared with the component initialize with boolean (false).
		@@ -19,11 +59,14 @@ ```js

		4 - Define the component :
		4 - Define the props component value
		```js
		<CustomizedModal />
		const closeButtonTextData = {
		closeButtonTextValue: 'Close',
		textNotificationValue: 'Notification message',
		confirmationTextValue: 'Understood'
		};
		```

		5 - When you define the component CustomizedModal don't forget to pass the childrens closeButtonText, textNotification, confirmationText, modalState, changeModalState

		5 - Define the component with his props :
		```js
		Example :
		```js
		<CustomizedModal
		@@ -47,5 +90,8 @@ closeButtonText={closeButtonTextData.closeButtonTextValue}
		// Components
		// Don't forget to import the CustomizedModal like this :
		// On a Npm library package use case
		import { CustomizedModal } from '@makabay/customizedmodal'

		// On github clone use case (from ./example/App.tsx)
		// import CustomizedModal from '../lib/components/CustomizedModal';

		// You can replace this App component by the component where you want placed the modal
		@@ -97,3 +143,2 @@ export default function App () {
		);
		}
		```
		}

Improved metrics

Worsened metrics

Dependency changes