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

@delangle/use-modal

Package Overview
Dependencies
Maintainers
1
Versions
383
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@delangle/use-modal - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.esm.js

126

dist/index.js

@@ -1,10 +0,118 @@

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
(function (ModalState) {
ModalState["opening"] = "opening";
ModalState["opened"] = "opened";
ModalState["closing"] = "closing";
ModalState["closed"] = "closed";
})(exports.ModalState || (exports.ModalState = {}));
const ESCAPE_KEY = 'Escape';
const DEFAULT_CONFIG = {
animationDuration: 300,
animated: false,
persistent: false,
open: false,
onClose: () => { },
};
Object.defineProperty(exports, "__esModule", { value: true });
const useModal_1 = __importDefault(require("./useModal"));
var useModal_interface_1 = require("./useModal.interface");
exports.ModalState = useModal_interface_1.ModalState;
exports.default = useModal_1.default;
//# sourceMappingURL=index.js.map
const useSSRLayoutEffect = typeof window === 'object' ? React.useLayoutEffect : React.useEffect;
const useMergedRef = (ref) => {
const innerRef = React.useRef(null);
return (ref ? ref : innerRef);
};
const useHasAlreadyBeenOpened = (open) => {
const hasAlreadyBeenOpened = React.useRef(false);
if (!hasAlreadyBeenOpened.current && open) {
hasAlreadyBeenOpened.current = true;
}
return hasAlreadyBeenOpened.current;
};
const useDelayedOpen = (open, animated) => {
const hasAlreadyRendered = React.useRef(false);
const shouldDelayOpening = !hasAlreadyRendered.current && animated && open;
const [canBeOpened, setCanBeOpened] = React.useState(!shouldDelayOpening);
React.useEffect(() => {
hasAlreadyRendered.current = true;
if (!canBeOpened) {
setCanBeOpened(true);
}
}, [canBeOpened]);
return !!(canBeOpened && open);
};
const useModal = (baseConfig) => {
const config = {
...DEFAULT_CONFIG,
...baseConfig,
};
const open = useDelayedOpen(config.open, config.animated);
const hasAlreadyBeenOpened = useHasAlreadyBeenOpened(open);
const domRef = useMergedRef(config.ref);
const configRef = React.useRef(config);
const [isLocalOpened, setLocalOpened] = React.useState(false);
const state = React.useMemo(() => {
if (!open && !isLocalOpened) {
return exports.ModalState.closed;
}
if (!open && isLocalOpened) {
return exports.ModalState.closing;
}
if (open && !isLocalOpened) {
return exports.ModalState.opening;
}
return exports.ModalState.opened;
}, [open, isLocalOpened]);
React.useEffect(() => {
configRef.current = config;
});
useSSRLayoutEffect(() => {
if (!configRef.current.animated && open !== isLocalOpened) {
setLocalOpened(open);
}
}, [isLocalOpened, open]);
const handleClose = React.useCallback(() => {
configRef.current.onClose();
}, []);
React.useEffect(() => {
if (configRef.current.animated) {
const timeout = setTimeout(() => setLocalOpened(open), configRef.current.animationDuration);
return () => clearTimeout(timeout);
}
}, [open]);
React.useEffect(() => {
if (state === exports.ModalState.opened) {
const handleKeyDown = (e) => {
if (!configRef.current.persistent &&
configRef.current.open &&
e.key === ESCAPE_KEY) {
handleClose();
}
};
const handleClick = (e) => {
if (!configRef.current.persistent &&
domRef.current &&
!domRef.current.contains(e.target)) {
handleClose();
}
};
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('click', handleClick);
return () => {
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('click', handleClick);
};
}
}, [domRef, handleClose, state]);
console.log('STATE', state);
return {
state,
close: handleClose,
ref: domRef,
hasAlreadyBeenOpened,
};
};
exports.default = useModal;

2

package.json
{
"name": "@delangle/use-modal",
"version": "1.0.0",
"version": "1.0.1",
"description": "React hook for modal management",

@@ -5,0 +5,0 @@ "private": false,

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