Socket
Socket
Sign inDemoInstall

@weahead/react-customizable-modal

Package Overview
Dependencies
2
Maintainers
9
Versions
6
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.0.0-rc.3 to 2.0.1

dist/helpers/tabbable.d.ts
dist/hooks/useAriaHide.d.ts
dist/index.d.ts
dist/index.js
dist/react-customizable-modal.cjs.development.js
dist/react-customizable-modal.cjs.development.js.map
dist/react-customizable-modal.cjs.production.min.js
dist/react-customizable-modal.cjs.production.min.js.map
dist/react-customizable-modal.esm.js
dist/react-customizable-modal.esm.js.map

12

dist/components/Overlay.d.ts

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

import type { PropsWithChildren } from "react";
export declare type OverlayProps = PropsWithChildren & {
onClick: (event: MouseEvent | TouchEvent) => void;
};
export declare function Overlay({ children }: OverlayProps): JSX.Element;
//# sourceMappingURL=Overlay.d.ts.map
import React, { PropsWithChildren } from 'react';
interface Props {
onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}
export declare const Overlay: React.FC<PropsWithChildren<Props>>;
export {};

15

dist/components/UIModal.d.ts

@@ -1,10 +0,7 @@

import type { PropsWithChildren } from 'react';
export declare type ModalProps = PropsWithChildren & {
import React, { ReactNode } from 'react';
interface Props {
role: string;
};
export declare const Modal: import("react").ForwardRefExoticComponent<{
children?: import("react").ReactNode;
} & {
role: string;
} & import("react").RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=UIModal.d.ts.map
children: ReactNode;
}
export declare const Modal: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
export {};

24

dist/containers/Modal.d.ts

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

import type { PropsWithChildren } from 'react';
export declare type ModalProps = PropsWithChildren & {
onEscape?: Function;
onOverlayClick?: (event: MouseEvent | TouchEvent) => void;
id?: string;
isOpen?: boolean;
role?: string;
shouldFocusAfterRender?: boolean;
shouldReturnFocusAfterClose?: boolean;
};
export declare function Modal({ onOverlayClick, onEscape, children, id, isOpen, role, shouldFocusAfterRender, shouldReturnFocusAfterClose, }: ModalProps): JSX.Element | null;
//# sourceMappingURL=Modal.d.ts.map
import React, { PropsWithChildren } from 'react';
interface Props {
id: string;
isOpen: boolean;
role: string;
shouldFocusAfterRender: boolean;
onEscape: Function;
onOverlayClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
shouldReturnFocusAfterClose: boolean;
}
export declare const Modal: React.FC<PropsWithChildren<Props>>;
export {};

10

dist/containers/ModalPortal.d.ts

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

import type { PropsWithChildren } from 'react';
export declare type ModalPortalProps = PropsWithChildren & {
import React, { PropsWithChildren } from 'react';
interface Props {
id: string;
};
export declare const ModalPortal: ({ id, children }: ModalPortalProps) => import("react").ReactPortal | null;
//# sourceMappingURL=ModalPortal.d.ts.map
}
export declare const ModalPortal: React.FC<PropsWithChildren<Props>>;
export {};

1

dist/hooks/useBodyScrollLock.d.ts
export declare function useBodyScrollLock(): void;
//# sourceMappingURL=useBodyScrollLock.d.ts.map

5

dist/hooks/useCloseOnEsc.d.ts

@@ -1,2 +0,3 @@

export declare function useCloseOnEsc(onEscape: () => void): void;
//# sourceMappingURL=useCloseOnEsc.d.ts.map
declare type onEscapeType = Function;
export declare function useCloseOnEsc(onEscape: onEscapeType): void;
export {};

1

dist/hooks/useHandleKeyPress.d.ts
export declare function useHandleKeyPress(callback: (event: KeyboardEvent) => void): void;
//# sourceMappingURL=useHandleKeyPress.d.ts.map

7

dist/hooks/useTrapFocus.d.ts

@@ -1,6 +0,7 @@

export declare type useTrapFocusOptions = {
/// <reference types="react" />
declare type optionsType = {
focusOnRender?: boolean;
returnFocus?: boolean;
};
export declare function useTrapFocus<T extends HTMLElement>(options?: useTrapFocusOptions): import("react").RefObject<T>;
//# sourceMappingURL=useTrapFocus.d.ts.map
export declare function useTrapFocus(opts?: optionsType): import("react").RefObject<HTMLDivElement>;
export {};

87

package.json
{
"name": "@weahead/react-customizable-modal",
"version": "2.0.0-rc.3",
"type": "module",
"description": "A fully customizable and accessable react modal with hook primitives.",
"version": "2.0.1",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"files": [
"dist"
],
"publishConfig": {
"access": "public"
"scripts": {
"start": "tsdx watch",
"build": "tsdx build",
"test": "tsdx test --passWithNoTests",
"lint": "tsdx lint",
"prepare": "tsdx build",
"release": "standard-version"
},
"main": "dist/main.cjs.js",
"module": "dist/main.es.js",
"types": "dist/main.d.ts",
"exports": {
".": {
"import": "./dist/main.es.js",
"require": "./dist/main.cjs.js"
"peerDependencies": {
"react": ">=16.9.19",
"react-dom": ">=16.9.19"
},
"husky": {
"hooks": {
"pre-commit": "tsdx lint"
}
},
"sideEffects": false,
"scripts": {
"dev": "npm-run-all build --parallel dev:*",
"dev:main": "vite build --emptyOutDir=false --watch",
"dev:examples": "vite -c vite.config.ts examples",
"build": "vite build",
"test": "vitest -c vite.config.ts"
"keywords": [
"react",
"modal",
"hooks",
"accessable",
"customizable"
],
"author": "Jonathan Borg <jonathan.borg@weahead.se>",
"repository": {
"type": "git",
"url": "git+https://github.com/weahead/react-customizable-modal.git"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
"prettier": {
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
},
"bugs": {
"url": "https://github.com/weahead/react-customizable-modal/issues"
},
"homepage": "https://github.com/weahead/react-customizable-modal#readme",
"module": "dist/react-customizable-modal.esm.js",
"devDependencies": {
"@rollup/plugin-typescript": "^8.4.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.4.3",
"@types/node": "^16",
"@types/react": "^18",
"@types/react-dom": "^18",
"@vitejs/plugin-react": "^2.0.1",
"jsdom": "^20.0.0",
"npm-run-all": "^4.1.5",
"@types/jest": "^24.9.1",
"@types/react": "^18.2.18",
"@types/react-dom": "^18.2.7",
"husky": "^4.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-spring": "^9.5.2",
"typescript": "^4.6.4",
"vite": "^3.0.7",
"vitest": "^0.22.1"
},
"dependencies": {
"tabbable": "^6.0.0"
"standard-version": "^9.5.0",
"tsdx": "^0.14.1",
"tslib": "^2.6.1",
"typescript": "^3.7.5",
"@testing-library/react": "^14.0.0"
}
}

129

README.md

@@ -20,5 +20,5 @@ # react-customizable-modal

- [Default builtin Modal](https://codesandbox.io/s/currying-moon-2251f)
- [Animated modal with react-spring](https://codesandbox.io/s/solitary-pond-b5kw3)
- [Swipe up from below ](https://codesandbox.io/s/bold-murdock-86ysz)
[Default builtin Modal](https://codesandbox.io/s/currying-moon-2251f)
[Animated modal with react-spring](https://codesandbox.io/s/solitary-pond-b5kw3)
[Swipe up from below ](https://codesandbox.io/s/bold-murdock-86ysz)

@@ -30,6 +30,6 @@ ## Code Examples

```jsx
import { Modal } from '@weahead/react-customizable-modal'
import { Modal } from "@weahead/react-customizable-modal";
function App() {
const [isOpen, setIsOpen] = useState(false)
const [isOpen, setIsOpen] = useState(false);
return (

@@ -39,3 +39,3 @@ <div>

onClick={() => {
setIsOpen(true)
setIsOpen(true);
}}

@@ -48,6 +48,6 @@ >

onEscape={() => {
setIsOpen(false)
setIsOpen(false);
}}
onOverlayClick={() => {
setIsOpen(false)
setIsOpen(false);
}}

@@ -57,3 +57,3 @@ >

onClick={() => {
setIsOpen(false)
setIsOpen(false);
}}

@@ -65,3 +65,3 @@ >

</div>
)
);
}

@@ -75,3 +75,3 @@ ```

```jsx
import React from 'react'
import React from "react";
import {

@@ -81,4 +81,4 @@ useTrapFocus,

useCloseOnEsc,
ModalPortal,
} from 'react-customizable-modal'
ModalPortal
} from "react-customizable-modal";

@@ -89,10 +89,10 @@ function Overlay({ children }) {

style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'fixed',
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "fixed",
top: 0,
bottom: 0,
left: 0,
right: 0,
right: 0
}}

@@ -102,36 +102,30 @@ >

</div>
)
);
}
function ModalWrapper({ children }) {
useBodyScrollLock()
useCloseOnEsc(onClose)
return <>{children}</>
}
export default function CustomModal({ isOpen, onClose, children }) {
const modalRef = useTrapFocus()
useBodyScrollLock();
useCloseOnEsc(onClose);
const modalRef = useTrapFocus();
return (
isOpen && (
<ModalPortal id={`customModal`}>
<ModalWrapper>
<Overlay>
<div
ref={modalRef}
style={{
width: 500,
height: 400,
backgroundColor: '#fff',
padding: 20,
position: 'absolute',
}}
>
<button onClick={onClose}>Close modal</button>
{children}
</div>
</Overlay>
</ModalWrapper>
<Overlay>
<div
ref={modalRef}
style={{
width: 500,
height: 400,
backgroundColor: "#fff",
padding: 20,
position: "absolute"
}}
>
<button onClick={onClose}>Close modal</button>
{children}
</div>
</Overlay>
</ModalPortal>
)
)
);
}

@@ -143,5 +137,5 @@ ```

```jsx
import CustomModal from 'CustomModal.jsx'
import CustomModal from "CustomModal.jsx";
function App() {
const [isOpen, setIsOpen] = useState(false)
const [isOpen, setIsOpen] = useState(false);
return (

@@ -151,3 +145,3 @@ <div>

onClick={() => {
setIsOpen(true)
setIsOpen(true);
}}

@@ -161,3 +155,3 @@ >

onClose={() => {
setIsOpen(false)
setIsOpen(false);
}}

@@ -168,3 +162,3 @@ >

</div>
)
);
}

@@ -206,3 +200,3 @@ ```

| --------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id | no | this will give the DOMnode that is created to hold the modal content an `id` if there already is a DOMnode with that `id` it will reuse that for the new modal |
| id | yes | this will give the DOMnode that is created to hold the modal content an `id` if there already is a DOMnode with that `id` it will reuse that for the new modal |
| isOpen | yes | this will be used to create the portal for the modal and mount the modal |

@@ -226,5 +220,5 @@ | role | no | for a11y purposes we can set the role for our modal, it defaults to `dialog` |

```jsx
const modalRef = useTrapFocus(options)
const modalRef = useTrapFocus(options);
// returns a ref that needs to be given to the element that you want to trap focus within
;<div ref={modalRef}>focus will be trapped in this div</div>
<div ref={modalRef}>focus will be trapped in this div</div>;
```

@@ -244,3 +238,3 @@

```jsx
useAriaHide(id) //often `id` would be 'root'
useAriaHide(id); //often `id` would be 'root'
```

@@ -260,3 +254,3 @@

```jsx
useBodyScrollLock()
useBodyScrollLock();
```

@@ -272,5 +266,5 @@

```jsx
useHandleKeyPress((e) => {
console.log(e.key)
})
useHandleKeyPress(e => {
console.log(e.keyCode);
});
```

@@ -290,4 +284,4 @@

useCloseOnEsc(() => {
console.log('ESC key was pressed')
})
console.log("ESC key was pressed");
});
```

@@ -299,19 +293,2 @@

#### useOnClickOutside
`import {useOnClickOutside} from '@weahead/react-customizable-modal'`
this hook is used by the `useOnClickOutside` hook but only triggers the callback if the escape key is pressed
```jsx
useOnClickOutside(ref, () => {
console.log('you pressed outside of the desired element')
})
```
| argument | required | description |
| -------- | -------- | ---------------------------------------------------------------------------------------------------------- |
| ref | yes | the refrence to the element that when a click outside of that element is triggered, the callback will fire |
| callback | yes | the callback to be triggered, when a click event outside of the referenced element happens |
<!-- ## Tests -->

@@ -318,0 +295,0 @@ 

dist/components/Overlay.d.ts.map
dist/components/UIModal.d.ts.map
dist/containers/Modal.d.ts.map
dist/containers/ModalPortal.d.ts.map
dist/containers/ModalPortal.test.d.ts
dist/containers/ModalPortal.test.d.ts.map
dist/hooks/useBodyScrollLock.d.ts.map
dist/hooks/useBodyScrollLock.test.d.ts
dist/hooks/useBodyScrollLock.test.d.ts.map
dist/hooks/useCloseOnEsc.d.ts.map
dist/hooks/useCloseOnEsc.test.d.ts
dist/hooks/useCloseOnEsc.test.d.ts.map
dist/hooks/useHandleKeyPress.d.ts.map
dist/hooks/useHandleKeyPress.test.d.ts
dist/hooks/useHandleKeyPress.test.d.ts.map
dist/hooks/useOnClickOutside.d.ts
dist/hooks/useOnClickOutside.d.ts.map
dist/hooks/useOnClickOutside.test.d.ts
dist/hooks/useOnClickOutside.test.d.ts.map
dist/hooks/useTrapFocus.d.ts.map
dist/hooks/useTrapFocus.test.d.ts
dist/hooks/useTrapFocus.test.d.ts.map
dist/main.cjs.js
dist/main.cjs.js.map
dist/main.d.ts
dist/main.d.ts.map
dist/main.es.js
dist/main.es.js.map
dist/main.umd.js
dist/main.umd.js.map
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc