Socket
Socket
Sign inDemoInstall

@weahead/react-customizable-modal

Package Overview
Dependencies
Maintainers
9
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@weahead/react-customizable-modal - npm Package Compare versions

Comparing version 1.3.1 to 2.0.0-rc.3

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

12

dist/components/Overlay.d.ts

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

import React from 'react';
interface Props {
onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}
export declare const Overlay: React.FC<Props>;
export {};
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

15

dist/components/UIModal.d.ts

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

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

24

dist/containers/Modal.d.ts

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

import React 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<Props>;
export {};
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

10

dist/containers/ModalPortal.d.ts

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

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

1

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

5

dist/hooks/useCloseOnEsc.d.ts

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

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

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,7 +0,6 @@

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

91

package.json
{
"name": "@weahead/react-customizable-modal",
"description": "A fully customizable and accessable react modal with hook primitives.",
"version": "1.3.1",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"version": "2.0.0-rc.3",
"type": "module",
"files": [
"dist"
],
"scripts": {
"start": "tsdx watch",
"build": "tsdx build",
"test": "tsdx test --passWithNoTests",
"lint": "tsdx lint",
"prepare": "tsdx build",
"release": "standard-version"
"publishConfig": {
"access": "public"
},
"peerDependencies": {
"react": ">=16.9.19",
"react-dom": ">=16.9.19"
},
"husky": {
"hooks": {
"pre-commit": "tsdx lint"
"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"
}
},
"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"
"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"
},
"prettier": {
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
},
"bugs": {
"url": "https://github.com/weahead/react-customizable-modal/issues"
"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",
"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"
},
"homepage": "https://github.com/weahead/react-customizable-modal#readme",
"module": "dist/react-customizable-modal.esm.js",
"devDependencies": {
"@types/jest": "^24.9.1",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"husky": "^4.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"standard-version": "^7.1.0",
"tsdx": "^0.12.3",
"tslib": "^1.10.0",
"typescript": "^3.7.5",
"@testing-library/react": "^9.4.0"
"dependencies": {
"tabbable": "^6.0.0"
}
}

135

README.md

@@ -9,3 +9,3 @@ # react-customizable-modal

There are several modal implementations in react, but none of them offered the flexibility to have total controll of the components being rendered so that you could use what ever animation library we wanted.
There are several modal implementations in react, but none of them offered the flexibility to have total control of the components being rendered so that you could use whichever animation library you want.

@@ -21,5 +21,5 @@ <!-- ## Screenshots -->

[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)

@@ -31,6 +31,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 (

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

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

@@ -49,6 +49,6 @@ >

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

@@ -58,3 +58,3 @@ >

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

@@ -66,3 +66,3 @@ >

</div>
);
)
}

@@ -76,3 +76,3 @@ ```

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

@@ -82,4 +82,4 @@ useTrapFocus,

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

@@ -90,10 +90,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,
}}

@@ -103,30 +103,36 @@ >

</div>
);
)
}
function ModalWrapper({ children }) {
useBodyScrollLock()
useCloseOnEsc(onClose)
return <>{children}</>
}
export default function CustomModal({ isOpen, onClose, children }) {
useBodyScrollLock();
useCloseOnEsc(onClose);
const modalRef = useTrapFocus();
const modalRef = useTrapFocus()
return (
isOpen && (
<ModalPortal id={`customModal`}>
<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>
</ModalWrapper>
</ModalPortal>
)
);
)
}

@@ -138,5 +144,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 (

@@ -146,3 +152,3 @@ <div>

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

@@ -156,3 +162,3 @@ >

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

@@ -163,3 +169,3 @@ >

</div>
);
)
}

@@ -195,3 +201,3 @@ ```

A basic Modal component ready for use, if you dont want to implement your own. it uses only the hooks and components from this packagfe
A basic Modal component ready for use, if you dont want to implement your own. it uses only the hooks and components from this package

@@ -202,3 +208,3 @@ ##### Props

| --------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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 |
| 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 |
| isOpen | yes | this will be used to create the portal for the modal and mount the modal |

@@ -222,5 +228,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>
```

@@ -237,6 +243,6 @@

sets the `aria-hidden` attribute on the element with the id passed in and removes is when the component that uses this hook is unmounted
sets the `aria-hidden` attribute on the element with the id passed in and removes it when the component that uses this hook is unmounted
```jsx
useAriaHide(id); //often `id` would be 'root'
useAriaHide(id) //often `id` would be 'root'
```

@@ -256,3 +262,3 @@

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

@@ -268,5 +274,5 @@

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

@@ -286,4 +292,4 @@

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

@@ -295,2 +301,19 @@

#### 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 -->

@@ -297,0 +320,0 @@ 

CHANGELOG.md
dist/helpers/tabbable.d.ts
dist/hooks/__tests__/useTrapFocus.test.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
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc