react-modal-global - npm Package Compare versions

Comparing version 1.1.0-rc1 to 1.1.0

dist/index.ts

 'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),extendStatics=function(e,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(a,c){a.__proto__=c}||function(a,c){for(var d in c)Object.prototype.hasOwnProperty.call(c,d)&&(a[d]=c[d])};return extendStatics(e,b)};
 function __extends(e,b){function a(){this.constructor=e}if("function"!==typeof b&&null!==b)throw new TypeError("Class extends value "+String(b)+" is not a constructor or null");extendStatics(e,b);e.prototype=null===b?Object.create(b):(a.prototype=b.prototype,new a)}var __assign=function(){__assign=Object.assign||function(e){for(var b,a=1,c=arguments.length;a<c;a++){b=arguments[a];for(var d in b)Object.prototype.hasOwnProperty.call(b,d)&&(e[d]=b[d])}return e};return __assign.apply(this,arguments)};
 function __read(e,b){var a="function"===typeof Symbol&&e[Symbol.iterator];if(!a)return e;e=a.call(e);var c,d=[];try{for(;(void 0===b||0<b--)&&!(c=e.next()).done;)d.push(c.value)}catch(g){var f={error:g}}finally{try{c&&!c.done&&(a=e["return"])&&a.call(e)}finally{if(f)throw f.error;}}return d}function __spreadArray(e,b,a){if(a||2===arguments.length)for(var c=0,d=b.length,f;c<d;c++)!f&&c in b||(f||(f=Array.prototype.slice.call(b,0,c)),f[c]=b[c]);return e.concat(f||Array.prototype.slice.call(b))}
-var modalContext=react.createContext(null);function classWithModifiers(e){for(var b=[],a=1;a<arguments.length;a++)b[a-1]=arguments[a];b=b.filter(Boolean);if(!b.length)return e;b=b.map(function(c){return e+"--"+c});return e+" "+b.join(" ")}var getCircularReplacer=function(){var e=new WeakSet;return function(b,a){if("object"===typeof a&&null!==a){if(e.has(a))return;e.add(a)}return a}};function serialize(e){return null==e?String(e):JSON.stringify(e,getCircularReplacer())}
-function stopPropagation(e){return function(b){var a=b.target;b=b.currentTarget;a instanceof Element&&b instanceof Element&&a!==b||(null===e||void 0===e?void 0:e())}}
+var modalContext=react.createContext(null);function classWithModifiers(e){for(var b=[],a=1;a<arguments.length;a++)b[a-1]=arguments[a];b=b.filter(Boolean);if(!b.length)return e;b=b.map(function(c){return e+"--"+c});return e+" "+b.join(" ")}
+function serialize(e){function b(){var a=new WeakSet;return function(c,d){if("object"===typeof d&&null!==d){if(a.has(d))return;a.add(d)}return d}}return null==e?String(e):JSON.stringify(e,function(a,c){c=b()(a,c);a=c instanceof Function?c.name===a?c.toString():c.name:c;return a})}function stopPropagation(e){return function(b){var a=b.target;b=b.currentTarget;a instanceof Element&&b instanceof Element&&a!==b||(null===e||void 0===e?void 0:e())}}
 var containers=new Set,ModalContainer=function(e){function b(){var a=null!==e&&e.apply(this,arguments)||this;a.state={active:!1,queue:[],forkedQueue:[]};return a}__extends(b,e);Object.defineProperty(b.prototype,"className",{get:function(){return this.props.className||"modal"},enumerable:!1,configurable:!0});b.prototype.componentDidMount=function(){containers.add(this)};b.prototype.componentWillUnmount=function(){containers.delete(this)};b.prototype.render=function(){var a,c,d=this.state,f=d.active;
@@ -7,0 +7,0 @@ d=d.queue.at(-1);var g=(null===(a=null===d||void 0===d?void 0:d.params)||void 0===a?0:a.closable)?stopPropagation(d.close):void 0;a=this.props.template||react.Fragment;var h=d?__assign(__assign({},d),{isClosed:!f}):null;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",__assign({className:classWithModifiers(this.className,f&&"active"),"aria-modal":!0,"aria-hidden":!f},{children:jsxRuntime.jsx("div",__assign({className:this.className+"__container",onClick:g},{children:jsxRuntime.jsx(modalContext.Provider,

package.json

 {
   "name": "react-modal-global",
-  "version": "1.1.0-rc1",
-  "description": "React Modal but Global",
+  "version": "1.1.0",
+  "description": "Highly reusable React Modal that can be run from useEffect.",
   "main": "dist/index.ts",
@@ -6,0 +6,0 @@ "types": "dist/index.d.ts",

README.md

@@ -18,3 +18,3 @@ # React Modal Global
 
-Needs feedback, please contribute in GitHub Issues or leave your message to [my discord server](https://discord.gg/DCUWrRhvnt).
+Needs feedback, please contribute to GitHub Issues or leave your message to [my discord server](https://discord.gg/DCUWrRhvnt).
 
@@ -31,4 +31,6 @@ ## Navigation
   - [Usage](#usage)
+    - [Playgrounds](#playgrounds)
+      - [Example of layouts useage](#example-of-layouts-useage)
+      - [Example of usage with ChakraUI (by @laurensnl)](#example-of-usage-with-chakraui-by-laurensnl)
     - [Add container](#add-container)
-      - [Show `ModalContainer` usage example](#show-modalcontainer-usage-example)
     - [Create new Modal component](#create-new-modal-component)
@@ -75,4 +77,12 @@ - [Plain component](#plain-component)
 
-Usage may seem a bit complicated but it's actually very simple, please, be patient and read all the thing through.
+### Playgrounds
 
+#### Example of layouts useage
+
+[![Edit react-modal-global](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-modal-global-examples-47yoil)
+
+#### Example of usage with ChakraUI (by [@laurensnl](https://github.com/laurensnl))
+
+[![Edit react-modal-global](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chakraui-nextjs-react-modal-global-h0g21f)
+
 ### Add container
@@ -82,4 +92,2 @@
 
-#### Show `ModalContainer` usage example
-
 ```tsx
@@ -104,3 +112,3 @@ import React from "react"
 
-All it needs for creating such is a valid `JSX.Element`:
+All it needs for creating modal component is a react component factory with a valid `JSX.Element`:
 
@@ -122,3 +130,3 @@ #### Plain component
 function ModalComponent() {
-  const modal = useModalContext() // Getting modal context of current component
+  const modal = useModalContext() // Getting modal context of currently active component
 
@@ -141,3 +149,3 @@ return (
 ```tsx
-import "react-modal-global/styles/modal.scss" // import default styles if should
+import "react-modal-global/styles/modal.scss" // import default styles if want
 
@@ -176,3 +184,3 @@ import { Modal } from "react-modal-global"
 
-[![Edit react-modal-global](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-modal-global-examples-47yoil)
+[Take a look at this example](https://codesandbox.io/s/react-modal-global-examples-47yoil)
 
@@ -222,3 +230,2 @@ To create your first `Popup` modal try this
 
-
 ## Layout concept
@@ -240,3 +247,2 @@
 
-
 You should manually add `aria-labelledby` and `aria-describedby` attributes to your layout.
@@ -258,3 +264,3 @@
 
-Or using `Modal.closeBy` methods.
+To close from outside you can use returned `close` method from `Modal.open` or `Modal.closeBy` methods
 
@@ -282,6 +288,6 @@ #### `CloseByComponent`
 
-| Option     | Description |
-| ---------- | ----------  |
-| `id`       | Specifies id of a modal. In react it's used as a `key`. May be used to find and close specific modal or else. |
-| `closable` | Specifies if a modal closing is controllable internally. If `false`, it's supposed to mean that user should do a **specific** action to close. |
+| Option     | Description                                                                                                                                                                 |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`       | Specifies id of a modal. In react it's used as a `key`. May be used to find and close specific modal or else.                                                               |
+| `closable` | Specifies if a modal closing is controllable internally. If `false`, it's supposed to mean that user should do a **specific** action to close.                              |
 | `weak`     | By default, a last closed modal will not be removed if the same modal will be requested to open. It will _restore_ previous modal but with `weak: true` it will not happen. |

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26465

increased by3.72%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

282

increased by2.17%

No dependency changes