Socket
Socket
Sign inDemoInstall

popupz

Package Overview
Dependencies
6
Maintainers
1
Versions
41
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.3.6 to 2.0.0

.eslintrc.cjs
index.html
postcss.config.cjs
public/vite.svg
src/App.css
src/App.jsx
src/index.jsx
src/main.jsx
src/Popz.jsx
src/ProgressBar.jsx
tailwind.config.js
vite.config.js

49

package.json
{
"name": "popupz",
"version": "1.3.6",
"type": "module",
"description": "A simple and customizable popup notification library for React and Next.js applications.",
"main": "dist/index.js",
"module": "dist/index.js",
"version": "2.0.0",
"description": "A simple and customizable popup notification/modal library for React applications.",
"main": "index.js",
"scripts": {
"build": "npx rollup -c",
"test": "echo \"Error: no test specified\" && exit 1"
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"
},

@@ -15,25 +13,28 @@ "keywords": [

"popup",
"modal",
"popupz",
"library"
"notification",
"modal"
],
"author": "Vikas Ipar",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.24.0",
"@babel/preset-react": "^7.23.3",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"repository": {
"type": "git",
"url": "https://github.com/vikasipar/react-popupz.git"
},
"homepage": "https://github.com/vikasipar/react-popupz",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rollup": "^4.12.0",
"rollup-plugin-postcss": "^4.0.2"
"react-icons": "^5.0.1"
},
"dependencies": {
"devDependencies": {
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.17",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.35",
"postcss-preset-env": "^9.4.0",
"react-icons": "^5.0.1",
"tailwindcss": "^3.4.1"
"tailwindcss": "^3.4.1",
"vite": "^5.1.4"
}
}

57

README.md

@@ -1,11 +0,11 @@

## Popupz 🍿
### 🍿 React-Popupz
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.
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.
#### Installation
To install Popupz, you can use npm:
To install React-Popupz, you can use npm:
```bash
npm install popupz
npm install react-popupz
```

@@ -17,16 +17,16 @@

Wrap your App.jsx component with the `PopzProvider` to enable the pop-up notifications. Your `main.jsx` should be structured as follows:
Wrap your application component with the `PopzProvider` to enable the popup 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 './index.css'
import { PopzProvider } from 'popupz';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import { PopzProvider } from 'react-popupz';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<PopzProvider>
<App />
</PopzProvider>
<PopzProvider>
<App />
<PopzProvider />
</React.StrictMode>,

@@ -39,14 +39,4 @@ )

To display popup notifications, first import the **usePopz** hook in your component.
To display popup notifications, use the `popz` function provided by the `usePopz` hook. The function accepts four parameters: `theme`, `type`, `message`, and `progressBar`.
```jsx
import { usePopz } from 'popupz/dist';
```
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'`.

@@ -61,5 +51,5 @@ - `type`: Specify the type of message. Available options are `'success'`, `'error'`, `'warning'`, `'info'`, or `'default'`.

import React from 'react';
import { usePopz } from 'popupz/dist';
import { usePopz } from 'react-popupz';
const MyComponent = () => {
const App = () => {
const { popz } = usePopz();

@@ -69,2 +59,3 @@

// your logic
//syntax- popz(theme, type, message, progress-bar);
popz('dark', 'success', 'Logged in Successfully!', 'true');

@@ -74,5 +65,8 @@ };

return (
<div>
<h1>My Component</h1>
<button onClick={handleSubmit} >
<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}
>
Submit

@@ -84,6 +78,5 @@ </button>

export default MyComponent;
export default App;
```
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.
babel.config.json
dist/index.js
rollup.config.js
src/components/Popz.jsx
src/components/ProgressBar.jsx
src/index.js
tailwind.config.cjs
src/index.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc