popupz - npm Package Compare versions

Comparing version 2.2.5 to 3.2.0

package.json

 {
   "name": "popupz",
-  "version": "2.2.5",
+  "version": "3.2.0",
   "description": "A simple and customizable popup notification library for React applications.",
@@ -5,0 +5,0 @@ "main": "src/index.jsx",

README.md

@@ -36,4 +36,14 @@ ## Popupz 🍿
 
-2. **Displaying Popup Notifications**
+2. **Custom Pop-Up Positioning**
 
+    Pop-up positioning is crucial for a seamless user experience. You can choose from options like top-left (tl), top-right (tr), bottom-left (bl), and bottom-right (br) to strategically place notifications. Adding a position prop to the PopzProvider component allows users to customize pop-up placement. If no position is specified, pop-ups default to the top-right corner for consistency.
+
+    ```jsx
+      <PopzProvider position='tl'>
+        <App />
+      </PopzProvider>
+    ```
+
+3. **Displaying Popup Notifications**
+
    To display popup notifications, first import the **usePopz** hook in your component.
@@ -60,3 +70,3 @@
    import React from 'react';
-   import { usePopz } from 'popupz/dist';
+   import { usePopz } from 'popupz';
 
@@ -63,0 +73,0 @@ const MyComponent = () => {

src/App.jsx

@@ -6,3 +6,3 @@ import React from 'react';
   return (
-    <PopzProvider>
+    <PopzProvider position='tl'>
       <AppContent />
@@ -28,6 +28,10 @@ </PopzProvider>
   };
+  const handleSubmit5 = () => {
+    popz('dark','default','', 'false');
+  };
 
   return (
-    <div className='App flex flex-col justify-around w-[9%] mx-3'>
+    <div className='App flex flex-col justify-around w-[90px] mx-3'>
       <h1>My Test App</h1>
+      <button className='p-2 bg-blue-700 text-white font-semibold rounded-lg my-5' onClick={handleSubmit5}>default</button>
       <button className='p-2 bg-blue-700 text-white font-semibold rounded-lg my-5' onClick={handleSubmit1}>success</button>
@@ -34,0 +38,0 @@ <button className='p-2 bg-blue-700 text-white font-semibold rounded-lg my-5' onClick={handleSubmit2}>error</button>

src/index.jsx

@@ -1,2 +0,2 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import Popz from './Popz';
@@ -7,9 +7,14 @@ import './index.css';
 
-export const PopzProvider = ({ children }) => {
+export const PopzProvider = ({ children, position }) => {
   const [popzQueue, setPopzQueue] = useState([]);
   const [id, setId] = useState(0);
+  const [dir, setDir] = useState('tr');
 
+  useEffect(() => {
+    const directions = ['tl', 'tr', 'bl', 'br'];
+    setDir(directions.includes(position)?position:'tr');
+  }, [position])
+
   const popz = {
     popz: (theme, type, message, progressBar) => {
-
       const newId = id + 1;
@@ -29,6 +34,6 @@ setId(newId);
       {popzQueue.length > 0 && (
-        <div className='container'>
+        <div className={`container ${dir}`}>
           {popzQueue.map((pop) => (
             <div key={pop.id} className='popzSpace'>
-              <Popz theme={pop.theme} type={pop.type} message={pop.message} progressBar={pop.progressBar} />
+              <Popz theme={pop.theme} type={pop.type} message={pop.message} progressBar={pop.progressBar} direction={dir}/>
             </div>
@@ -35,0 +40,0 @@ ))}

src/Popz.jsx

@@ -9,4 +9,4 @@ import React, { useState, useEffect } from 'react';
 
-const Popz = ({theme, type, message, progressBar}) => {
-
+const Popz = ({theme, type, message, progressBar, direction}) => {
+  const dir = direction;
   const [color, setColor] = useState('');
@@ -61,3 +61,3 @@ const [bgcolor, setBgcolor] = useState('');
   return (
-    <div className={`popz ${theme==='light'? 'lightMode': 'darkMode'} ${progressBar==='true' ? 'withProgressBar':'withoutProgressBar'}`}>
+    <div className={`popz ${(dir==='tr' || dir==='br')?'popz-right':'popz-left'} ${theme==='light'? 'lightMode': 'darkMode'} ${progressBar==='true' ? 'withProgressBar':'withoutProgressBar'}`}>
         <div className='contentWraper'>
@@ -64,0 +64,0 @@ <span className='icon' style={{color: `${color}`}}>

No alert changes

Improved metrics

Total package byte prevSize

12907

increased by11.87%

Lines of code

307

increased by12.04%

Number of lines in readme file

94

increased by11.9%

No dependency changes