Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-clear-modal

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-clear-modal - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

8

dist/index.d.ts
import React, { HTMLAttributes, ReactNode } from 'react';
export declare type ReactClearModalProps = {
isOpen: boolean;
isOpen?: boolean;
onRequestClose?: () => void;

@@ -9,2 +9,3 @@ closeTimeout?: number;

children: ReactNode;
parentElement?: HTMLElement | string;
disableFocusOnContent?: boolean;

@@ -14,7 +15,6 @@ disableCloseOnEsc?: boolean;

disableBodyScrollOnOpen?: boolean;
renderInPortal?: boolean;
portalContainer?: HTMLElement;
disableRenderInPortal?: boolean;
} & HTMLAttributes<HTMLDivElement>;
declare function ReactClearModal({ isOpen, onRequestClose, closeTimeout, preRender, contentProps, children, disableFocusOnContent, disableCloseOnEsc, disableCloseOnBgClick, disableBodyScrollOnOpen, renderInPortal, portalContainer, ...wrapperProps }: ReactClearModalProps): JSX.Element | null;
declare function ReactClearModal({ isOpen, onRequestClose, closeTimeout, preRender, contentProps, children, parentElement, disableFocusOnContent, disableCloseOnEsc, disableCloseOnBgClick, disableBodyScrollOnOpen, disableRenderInPortal, ...wrapperProps }: ReactClearModalProps): JSX.Element | null;
declare const _default: React.MemoExoticComponent<typeof ReactClearModal>;
export default _default;

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

import e,{memo as t,useState as n,useRef as r,useCallback as o,useEffect as l}from"react";import{createPortal as i}from"react-dom";function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s.apply(this,arguments)}function f(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,l=[],i=!0,c=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);i=!0);}catch(e){c=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(c)throw o}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return d(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var p=["isOpen","onRequestClose","closeTimeout","preRender","contentProps","children","disableFocusOnContent","disableCloseOnEsc","disableCloseOnBgClick","disableBodyScrollOnOpen","renderInPortal","portalContainer"];function b(t){var c=t.isOpen,a=t.onRequestClose,d=t.closeTimeout,b=t.preRender,O=void 0!==b&&b,m=t.contentProps,v=void 0===m?{}:m,g=t.children,w=t.disableFocusOnContent,h=t.disableCloseOnEsc,j=t.disableCloseOnBgClick,C=t.disableBodyScrollOnOpen,P=t.renderInPortal,S=void 0!==P&&P,E=t.portalContainer,k=f(t,p),I=y(n("undefined"!=typeof window),2),x=I[0],D=I[1],A=r(null),T=r(null),B=o((function(e){var t;k.onClick&&k.onClick(e),!a||j||e.target===T.current||null!==(t=T.current)&&void 0!==t&&t.contains(e.target)||a()}),[k,a,j]),R=o((function(e){v.onKeyDown&&v.onKeyDown(e),!a||h||"Escape"!==e.code&&27!==e.keyCode||a()}),[v,a,h]),K=o((function(){return c||O?e.createElement("div",s({},k,{style:u({alignItems:"center",bottom:0,display:c?"flex":"none",left:0,overflow:"auto",position:"fixed",right:0,top:0},k.style),onClick:B}),e.createElement("div",s({},v,{style:u({margin:"auto"},v.style),onKeyDown:R,tabIndex:-1,ref:T}),g)):null}),[g,v,R,B,c,k,O]);return l((function(){return d&&a&&(A.current=setTimeout(a,d)),function(){clearTimeout(A.current)}}),[d,a]),l((function(){var e;c&&!w&&(null===(e=T.current)||void 0===e||e.focus())}),[c,w]),l((function(){var e=document.body.style.overflow;return c&&C&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=e}}),[c,C]),l((function(){S&&D(!0)}),[S]),S?x?i(K(),E||document.body):null:K()}var O=t(b);export{O as default};
import e,{memo as t,useState as n,useRef as r,useCallback as o,useEffect as l}from"react";import{createPortal as i}from"react-dom";function u(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s.apply(this,arguments)}function f(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function d(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,l=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return y(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return y(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var p=["isOpen","onRequestClose","closeTimeout","preRender","contentProps","children","parentElement","disableFocusOnContent","disableCloseOnEsc","disableCloseOnBgClick","disableBodyScrollOnOpen","disableRenderInPortal"];function b(t){var u=t.isOpen,a=void 0!==u&&u,y=t.onRequestClose,b=t.closeTimeout,O=t.preRender,m=void 0!==O&&O,v=t.contentProps,g=void 0===v?{}:v,w=t.children,h=t.parentElement,j=t.disableFocusOnContent,P=t.disableCloseOnEsc,C=t.disableCloseOnBgClick,S=t.disableBodyScrollOnOpen,E=t.disableRenderInPortal,k=f(t,p),I=d(n(!E||"undefined"!=typeof window),2),x=I[0],D=I[1],A=r(null),R=r(null),T=o((function(e){var t;k.onClick&&k.onClick(e),!y||C||e.target===R.current||null!==(t=R.current)&&void 0!==t&&t.contains(e.target)||y()}),[k,y,C]),B=o((function(e){g.onKeyDown&&g.onKeyDown(e),!y||P||"Escape"!==e.code&&27!==e.keyCode||y()}),[g,y,P]),q=o((function(){return a||m?e.createElement("div",s({},k,{style:c({alignItems:"center",bottom:0,display:a?"flex":"none",left:0,overflow:"auto",position:"fixed",right:0,top:0},k.style),onClick:T}),e.createElement("div",s({},g,{style:c({margin:"auto"},g.style),onKeyDown:B,tabIndex:-1,ref:R}),w)):null}),[w,g,B,T,a,k,m]);if(l((function(){return b&&y&&(A.current=setTimeout(y,b)),function(){clearTimeout(A.current)}}),[b,y]),l((function(){var e;a&&!j&&(null===(e=R.current)||void 0===e||e.focus())}),[a,j]),l((function(){var e=document.body.style.overflow;return a&&S&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=e}}),[a,S]),l((function(){E||D(!0)}),[E]),x){if(E)return q();var K="string"==typeof h?h?document.querySelector(h):null:h;return i(q(),K||document.body)}return null}var O=t(b);export{O as default};

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

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ReactClearModal=t(e.React,e.ReactDOM)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e);function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,l=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return f(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var s=["isOpen","onRequestClose","closeTimeout","preRender","contentProps","children","disableFocusOnContent","disableCloseOnEsc","disableCloseOnBgClick","disableBodyScrollOnOpen","renderInPortal","portalContainer"];function d(n){var o=n.isOpen,i=n.onRequestClose,f=n.closeTimeout,d=n.preRender,y=void 0!==d&&d,b=n.contentProps,p=void 0===b?{}:b,O=n.children,m=n.disableFocusOnContent,v=n.disableCloseOnEsc,g=n.disableCloseOnBgClick,h=n.disableBodyScrollOnOpen,j=n.renderInPortal,w=void 0!==j&&j,C=n.portalContainer,P=c(n,s),E=a(e.useState("undefined"!=typeof window),2),S=E[0],k=E[1],R=e.useRef(null),x=e.useRef(null),D=e.useCallback((function(e){var t;P.onClick&&P.onClick(e),!i||g||e.target===x.current||null!==(t=x.current)&&void 0!==t&&t.contains(e.target)||i()}),[P,i,g]),I=e.useCallback((function(e){p.onKeyDown&&p.onKeyDown(e),!i||v||"Escape"!==e.code&&27!==e.keyCode||i()}),[p,i,v]),T=e.useCallback((function(){return o||y?r.default.createElement("div",u({},P,{style:l({alignItems:"center",bottom:0,display:o?"flex":"none",left:0,overflow:"auto",position:"fixed",right:0,top:0},P.style),onClick:D}),r.default.createElement("div",u({},p,{style:l({margin:"auto"},p.style),onKeyDown:I,tabIndex:-1,ref:x}),O)):null}),[O,p,I,D,o,P,y]);return e.useEffect((function(){return f&&i&&(R.current=setTimeout(i,f)),function(){clearTimeout(R.current)}}),[f,i]),e.useEffect((function(){var e;o&&!m&&(null===(e=x.current)||void 0===e||e.focus())}),[o,m]),e.useEffect((function(){var e=document.body.style.overflow;return o&&h&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=e}}),[o,h]),e.useEffect((function(){w&&k(!0)}),[w]),w?S?t.createPortal(T(),C||document.body):null:T()}return e.memo(d)}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ReactClearModal=t(e.React,e.ReactDOM)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e);function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,l=[],u=!0,i=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==n.return||n.return()}finally{if(i)throw o}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return f(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var s=["isOpen","onRequestClose","closeTimeout","preRender","contentProps","children","parentElement","disableFocusOnContent","disableCloseOnEsc","disableCloseOnBgClick","disableBodyScrollOnOpen","disableRenderInPortal"];function d(n){var o=n.isOpen,u=void 0!==o&&o,f=n.onRequestClose,d=n.closeTimeout,y=n.preRender,b=void 0!==y&&y,p=n.contentProps,O=void 0===p?{}:p,m=n.children,v=n.parentElement,g=n.disableFocusOnContent,h=n.disableCloseOnEsc,j=n.disableCloseOnBgClick,w=n.disableBodyScrollOnOpen,C=n.disableRenderInPortal,P=c(n,s),E=a(e.useState(!C||"undefined"!=typeof window),2),S=E[0],k=E[1],R=e.useRef(null),x=e.useRef(null),D=e.useCallback((function(e){var t;P.onClick&&P.onClick(e),!f||j||e.target===x.current||null!==(t=x.current)&&void 0!==t&&t.contains(e.target)||f()}),[P,f,j]),I=e.useCallback((function(e){O.onKeyDown&&O.onKeyDown(e),!f||h||"Escape"!==e.code&&27!==e.keyCode||f()}),[O,f,h]),T=e.useCallback((function(){return u||b?r.default.createElement("div",i({},P,{style:l({alignItems:"center",bottom:0,display:u?"flex":"none",left:0,overflow:"auto",position:"fixed",right:0,top:0},P.style),onClick:D}),r.default.createElement("div",i({},O,{style:l({margin:"auto"},O.style),onKeyDown:I,tabIndex:-1,ref:x}),m)):null}),[m,O,I,D,u,P,b]);if(e.useEffect((function(){return d&&f&&(R.current=setTimeout(f,d)),function(){clearTimeout(R.current)}}),[d,f]),e.useEffect((function(){var e;u&&!g&&(null===(e=x.current)||void 0===e||e.focus())}),[u,g]),e.useEffect((function(){var e=document.body.style.overflow;return u&&w&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=e}}),[u,w]),e.useEffect((function(){C||k(!0)}),[C]),S){if(C)return T();var A="string"==typeof v?v?document.querySelector(v):null:v;return t.createPortal(T(),A||document.body)}return null}return e.memo(d)}));
{
"name": "react-clear-modal",
"version": "0.1.0",
"description": "Simple and lightweight fully controlled modal component for React.js",
"version": "1.0.0",
"description": "Simple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js",
"files": [

@@ -6,0 +6,0 @@ "dist/"

@@ -8,3 +8,3 @@ # react-clear-modal

Simple and lightweight modal component for React.js
Simple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js

@@ -75,15 +75,15 @@ ## Table of contents

| Name | Type | Default Value | Description |
| --------------------------- | ------------- | --------------- | ---------------------------------------------------------------------------------------------------------------- |
| **isOpen** | `boolean` | `false` | Is the modal open |
| **onRequestClose** | `function` | | Callback to handle the request to close the modal |
| **closeTimeout** | `number` | | Time period in milliseconds after which the modal close function (`onRequestClose` prop) will be called |
| **preRender** | `boolean` | `false` | Whether the modal window and its content must be present in the DOM when the `isOpen` property is set to `false` |
| **contentProps** | `object` | `{}` | DOM props (HTMLAttributes) for modal content wrapper div |
| **disableCloseOnEsc** | `boolean` | `false` | Prevent modal window from closing when `ESC` key is pressed |
| **disableCloseOnBgClick** | `boolean` | `false` | Prevent modal from closing after clicking on modal background |
| **disableBodyScrollOnOpen** | `boolean` | `false` | Set `{overflow: hidden}` for `document.body` when modal is open |
| **renderInPortal** | `boolean` | `false` | Enable render modal in portal |
| **portalContainer** | `HTMLElement` | `document.body` | portal container element (ignored if `renderInPortal` is set to false) |
| ... | `object` | `{}` | DOM props (HTMLAttributes) for modal container div |
| Name | Type | Default Value | Description |
| --------------------------- | ----------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **isOpen** | `boolean` | `false` | Is the modal open |
| **onRequestClose** | `function` | | The function that will be called to close the modal window when the ESC button is pressed (if `disableCloseOnEsc` !== true) or an area outside of the content is clicked (if `disableCloseOnBgClick` !== true) |
| **closeTimeout** | `number` | | Time period in milliseconds after which the modal close function (`onRequestClose` prop) will be called |
| **preRender** | `boolean` | `false` | Whether the modal window and its content must be present in the DOM when the `isOpen` property is set to `false` |
| **contentProps** | `object` | `{}` | DOM props (HTMLAttributes) for modal content wrapper div |
| **parentElement** | `string`\|`HTMLElement` | `document.body` | Modal Portal container element (`HTMLElement`) or css selector (`string`). Ignored if `disableRenderInPortal` is set to `true` |
| **disableCloseOnEsc** | `boolean` | `false` | Prevent modal window from closing when `ESC` key is pressed |
| **disableCloseOnBgClick** | `boolean` | `false` | Prevent modal from closing after clicking on modal background |
| **disableBodyScrollOnOpen** | `boolean` | `false` | Set `{overflow: hidden}` for `document.body` when modal is open |
| **disableRenderInPortal** | `boolean` | `false` | Prevent render modal in portal (if `true` it will be rendered directly inside parent component) |
| ... | `object` | `{}` | DOM props (HTMLAttributes) for modal container div |

@@ -90,0 +90,0 @@ ## Demo

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc