popupz
Advanced tools
Comparing version 2.2.4 to 2.2.5
| { | ||
| "name": "popupz", | ||
| "version": "2.2.4", | ||
| "description": "A simple and customizable popup notification/modal library for React applications.", | ||
| "version": "2.2.5", | ||
| "description": "A simple and customizable popup notification library for React applications.", | ||
| "main": "src/index.jsx", | ||
@@ -13,2 +13,3 @@ "scripts": { | ||
| "popup", | ||
| "popups", | ||
| "notification", | ||
@@ -19,5 +20,5 @@ "modal" | ||
| "type": "git", | ||
| "url": "https://github.com/vikasipar/react-popupz.git" | ||
| "url": "https://github.com/vikasipar/popupz.git" | ||
| }, | ||
| "homepage": "https://github.com/vikasipar/react-popupz", | ||
| "homepage": "https://github.com/vikasipar/popupz", | ||
| "dependencies": { | ||
@@ -24,0 +25,0 @@ "react": "^18.2.0", |
@@ -1,11 +0,11 @@ | ||
| ### 🍿 React-Popupz | ||
| ## Popupz 🍿 | ||
| React-Popupz is a simple and customizable popup notification library for React applications. It provides an easy way to display success, error, warning, info, or default messages to users with customizable themes and message content. | ||
| Popupz is a simple and customizable popup notification library for React applications. It provides an easy way to display success, error, warning, info, or default messages to users with customizable themes and message content. | ||
| #### Installation | ||
| To install React-Popupz, you can use npm: | ||
| To install Popupz, you can use npm: | ||
| ```bash | ||
| npm install react-popupz | ||
| npm install popupz | ||
| ``` | ||
@@ -17,16 +17,16 @@ | ||
| Wrap your application component with the `PopzProvider` to enable the popup notifications. Your `main.jsx` should be structured as follows: | ||
| Wrap your App.jsx component with the `PopzProvider` to enable the pop-up notifications. Your `main.jsx` should be structured as follows: | ||
| ```jsx | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom/client'; | ||
| import App from './App.jsx'; | ||
| import { PopzProvider } from 'react-popupz'; | ||
| import './index.css'; | ||
| import React from 'react' | ||
| import ReactDOM from 'react-dom/client' | ||
| import App from './App.jsx' | ||
| import './index.css' | ||
| import { PopzProvider } from 'popupz'; | ||
| ReactDOM.createRoot(document.getElementById('root')).render( | ||
| <React.StrictMode> | ||
| <PopzProvider> | ||
| <App /> | ||
| <PopzProvider /> | ||
| <PopzProvider> | ||
| <App /> | ||
| </PopzProvider> | ||
| </React.StrictMode>, | ||
@@ -39,4 +39,14 @@ ) | ||
| To display popup notifications, use the `popz` function provided by the `usePopz` hook. The function accepts four parameters: `theme`, `type`, `message`, and `progressBar`. | ||
| To display popup notifications, first import the **usePopz** hook in your component. | ||
| ```jsx | ||
| import { usePopz } from 'popupz'; | ||
| ``` | ||
| Now use the `popz` function provided by the `usePopz` hook. The function accepts four parameters: `theme`, `type`, `message`, and `progressBar`. | ||
| ```jsx | ||
| //syntax- popz(theme, type, message, progress-bar); | ||
| ``` | ||
| - `theme`: Specify the theme of the popup. It can be either `'dark'` or `'light'`. | ||
@@ -51,5 +61,5 @@ - `type`: Specify the type of message. Available options are `'success'`, `'error'`, `'warning'`, `'info'`, or `'default'`. | ||
| import React from 'react'; | ||
| import { usePopz } from 'react-popupz'; | ||
| import { usePopz } from 'popupz/dist'; | ||
| const App = () => { | ||
| const MyComponent = () => { | ||
| const { popz } = usePopz(); | ||
@@ -59,3 +69,2 @@ | ||
| // your logic | ||
| //syntax- popz(theme, type, message, progress-bar); | ||
| popz('dark', 'success', 'Logged in Successfully!', 'true'); | ||
@@ -65,8 +74,5 @@ }; | ||
| return ( | ||
| <div className='App'> | ||
| <h1>My Test App</h1> | ||
| <button | ||
| className='p-2 bg-blue-700 text-white font-semibold rounded-lg my-5' | ||
| onClick={handleSubmit} | ||
| > | ||
| <div> | ||
| <h1>My Component</h1> | ||
| <button onClick={handleSubmit} > | ||
| Submit | ||
@@ -78,5 +84,6 @@ </button> | ||
| export default App; | ||
| export default MyComponent; | ||
| ``` | ||
| In this example, clicking the submit button triggers the display of a success popup notification with a dark theme, displaying the message "Logged in Successfully!" and including a progress bar. | ||
No alert changes
Improved metrics
- Number of lines in readme file
- increased by9.09%
84
Worsened metrics
- Total package byte prevSize
- decreased by-0.12%
11538
No dependency changes