popup-react - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

dist/components/ImageQuickView/ImageQuickView.d.ts

@@ -0,1 +1,2 @@
+import { WrapperStyle } from "../utils/BGWrapper";
 type props = {
@@ -5,6 +6,7 @@ src?: string;
     bgWrapper?: boolean;
+    wrapperStyle?: WrapperStyle;
     isVisible?: boolean;
     onClose: () => void;
 };
-export default function ImageQuickView({ src, alt, bgWrapper, isVisible, onClose }: props): import("react/jsx-runtime").JSX.Element;
+export default function ImageQuickView({ src, alt, bgWrapper, wrapperStyle, isVisible, onClose }: props): import("react/jsx-runtime").JSX.Element;
 export {};

dist/components/utils/BGWrapper.d.ts

@@ -1,1 +0,10 @@
-export default function BGWrapper(): import("react/jsx-runtime").JSX.Element;
+export type WrapperStyle = {
+    color?: string;
+    opacity?: number;
+};
+type props = {
+    wrapperStyle?: WrapperStyle;
+    onClick?: () => void;
+};
+export default function BGWrapper({ wrapperStyle, onClick }: props): import("react/jsx-runtime").JSX.Element;
+export {};

dist/index.js

 /*! For license information please see index.js.LICENSE.txt */
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports.$=r(require("react")):e.$=r(e.react)}(self,(e=>(()=>{"use strict";var r={20:(e,r,t)=>{var o=t(155),n=Symbol.for("react.element"),i=Symbol.for("react.fragment"),p=Object.prototype.hasOwnProperty,a=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,x={key:!0,ref:!0,__self:!0,__source:!0};function s(e,r,t){var o,i={},s=null,l=null;for(o in void 0!==t&&(s=""+t),void 0!==r.key&&(s=""+r.key),void 0!==r.ref&&(l=r.ref),r)p.call(r,o)&&!x.hasOwnProperty(o)&&(i[o]=r[o]);if(e&&e.defaultProps)for(o in r=e.defaultProps)void 0===i[o]&&(i[o]=r[o]);return{$$typeof:n,type:e,key:s,ref:l,props:i,_owner:a.current}}r.Fragment=i,r.jsx=s,r.jsxs=s},848:(e,r,t)=>{e.exports=t(20)},155:r=>{r.exports=e}},t={};function o(e){var n=t[e];if(void 0!==n)return n.exports;var i=t[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{ImageQuickView:()=>x});var i=o(848);function p(){return(0,i.jsx)("div",{style:{height:"100vh",width:"100vw",position:"fixed",top:"0",left:"0",backgroundColor:"white",opacity:"50%"}})}function a({children:e,onClose:r=()=>{}}){return(0,i.jsxs)("div",{style:{position:"fixed",left:"50%",top:"50%",transform:"translateX(-50%) translateY(-50%)",maxHeight:"80vh",maxWidth:"80vw",backgroundColor:"white",boxShadow:"rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px"},children:[(0,i.jsx)("div",{onClick:r,style:{position:"absolute",top:"-15px",right:"-15px",height:"20px",width:"20px",padding:"5px",borderRadius:"100%",backgroundColor:"#ffffffcc",boxShadow:"rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",cursor:"pointer"},children:(0,i.jsx)("span",{style:{fontSize:"xx-large",lineHeight:"18px",padding:"1px"},children:"×"})}),e]})}function x({src:e="",alt:r="",bgWrapper:t=!0,isVisible:o=!1,onClose:n=()=>{}}){return(0,i.jsx)(i.Fragment,{children:o&&e&&(0,i.jsxs)(i.Fragment,{children:[t&&(0,i.jsx)(p,{}),(0,i.jsx)(a,{onClose:n,children:(0,i.jsx)("img",{src:e,alt:r,style:{maxWidth:"80vw",maxHeight:"80vh",minWidth:"200px",objectFit:"contain"}})})]})})}return n})()));
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports.$=r(require("react")):e.$=r(e.react)}(self,(e=>(()=>{"use strict";var r={20:(e,r,t)=>{var o=t(155),n=Symbol.for("react.element"),p=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,a=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function s(e,r,t){var o,p={},s=null,x=null;for(o in void 0!==t&&(s=""+t),void 0!==r.key&&(s=""+r.key),void 0!==r.ref&&(x=r.ref),r)i.call(r,o)&&!l.hasOwnProperty(o)&&(p[o]=r[o]);if(e&&e.defaultProps)for(o in r=e.defaultProps)void 0===p[o]&&(p[o]=r[o]);return{$$typeof:n,type:e,key:s,ref:x,props:p,_owner:a.current}}r.Fragment=p,r.jsx=s,r.jsxs=s},848:(e,r,t)=>{e.exports=t(20)},155:r=>{r.exports=e}},t={};function o(e){var n=t[e];if(void 0!==n)return n.exports;var p=t[e]={exports:{}};return r[e](p,p.exports,o),p.exports}o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{ImageQuickView:()=>l});var p=o(848);function i({wrapperStyle:e,onClick:r=()=>{}}){const t=e&&function(e){if(!e)return!1;const r=(new Option).style;return r.color=e,""!==r.color}(e.color)?e.color:"white",o=e&&e.opacity&&e.opacity>=0&&e.opacity<=1?e.opacity:.5;return(0,p.jsx)("div",{style:{height:"100vh",width:"100vw",position:"fixed",top:"0",left:"0",backgroundColor:t,opacity:o},onClick:r})}function a({children:e,onClose:r=()=>{}}){return(0,p.jsxs)("div",{style:{position:"fixed",display:"flex",left:"50%",top:"50%",transform:"translateX(-50%) translateY(-50%)",maxHeight:"80vh",maxWidth:"80vw",backgroundColor:"transparent",boxShadow:"rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px"},children:[(0,p.jsx)("div",{onClick:r,style:{position:"absolute",top:"-15px",right:"-15px",height:"20px",width:"20px",padding:"5px",borderRadius:"100%",backgroundColor:"#ffffffcc",boxShadow:"rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",cursor:"pointer"},children:(0,p.jsx)("span",{style:{fontSize:"xx-large",lineHeight:"18px",padding:"1px"},children:"×"})}),e]})}function l({src:e="",alt:r="",bgWrapper:t=!0,wrapperStyle:o,isVisible:n=!1,onClose:l=()=>{}}){return(0,p.jsx)(p.Fragment,{children:n&&e&&(0,p.jsxs)(p.Fragment,{children:[t&&(0,p.jsx)(i,{wrapperStyle:o,onClick:l}),(0,p.jsx)(a,{onClose:l,children:(0,p.jsx)("img",{src:e,alt:r,style:{maxWidth:"80vw",maxHeight:"80vh",minWidth:"200px",objectFit:"contain"}})})]})})}return n})()));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "popup-react",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "A collection of beautiful popup components for react.",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -54,2 +54,6 @@
         bgWrapper={true}
+        wrapperStyle={{
+          color: '#fff',
+          opacity: 0.7
+        }}
         isVisible={!!selectedImage}
@@ -68,5 +72,6 @@ onClose={closeQuickView}
 - `src`: (string) **Required**. The URL of the image to be displayed in the quick view.
-- `alt`: (string) Optional. The alt text for the image.
-- `bgWrapper`: (boolean) Optional. Show or hide background wrapper. (default: true)
-- `isVisible`: (boolean) Optional. Show or hide the quick view. (default: false)
+- `alt`: (string) **Optional**. The alt text for the image.
+- `bgWrapper`: (boolean) **Optional**. Show or hide background wrapper. (default: true)
+- `wrapperStyle`: (object) **Optional**. Contains the color and opacily property of the background Wrapper.
+- `isVisible`: (boolean) **Optional**. Show or hide the quick view. (default: false)
 - `onClose`: (function) **Required**. Callback function triggered when the modal is closed.
@@ -84,2 +89,6 @@
   bgWrapper={true}
+  wrapperStyle={{
+    color: '#fff',
+    opacity: 0.7
+  }}
   isVisible={!!selectedImage}
@@ -90,8 +99,13 @@ onClose={closeQuickView}
 
-## Future Components
+## Upcoming components
 
-We plan to extend `popup-react` with more utility-focused components that integrate seamlessly into modern React applications.
+- Toast
+- Action Dialog
 
+## Upcoming Improvements
+
+- Transition animations
+
 ## License
 
 This project is licensed under the MIT License.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19920

increased by10.1%

Lines of code

45

increased by36.36%

Number of lines in readme file

108

increased by14.89%

No dependency changes