Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/microcmsio/react-hooks-use-modal
This is a customizable modal with react-portal.
https://github.com/microcmsio/react-hooks-use-modal
Last synced: about 18 hours ago
JSON representation
This is a customizable modal with react-portal.
- Host: GitHub
- URL: https://github.com/microcmsio/react-hooks-use-modal
- Owner: microcmsio
- Created: 2019-09-06T13:37:07.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T10:12:52.000Z (over 1 year ago)
- Last Synced: 2024-08-08T02:12:58.567Z (3 months ago)
- Language: TypeScript
- Homepage: https://microcmsio.github.io/react-hooks-use-modal/
- Size: 1.17 MB
- Stars: 171
- Watchers: 7
- Forks: 22
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# useModal
This is a react hook which can open the modal easily.
## Usage
```javascript
import React, { useState, useCallback } from 'react';
import { createRoot } from 'react-dom/client';
import { useModal } from 'react-hooks-use-modal';
const App = () => {
const [Modal, open, close, isOpen] = useModal('root', {
preventScroll: true,
focusTrapOptions: {
clickOutsideDeactivates: false,
},
});
return (
Modal is Open? {isOpen ? 'Yes' : 'No'}
OPEN
Title
This is a customizable modal.
CLOSE
);
};
const root = createRoot(document.getElementById('root'));
root.render();
```
## Syntax
### [ModalComponent, openFunc, closeFunc, isOpenBool] = useModal(domNode?, { initialValue?, preventScroll?, focusTrapOptions?, components? })
`ModalComponent`
Type: React.FC<{ title?: React.ReactNode; description?: React.ReactNode, children?: React.ReactNode, additionalProps?: Record }>
Modal component that displays children in the screen center.
If you specify `title` and `description`, `additionalProps` you must implement custom components with the `components` option's `Modal` property and render in them.
See EXAMPLE below for details.
https://github.com/microcmsio/react-hooks-use-modal/blob/master/examples/src/js/components-option/index.tsx
`openFunc`
A function to open modal.
`closeFunc`
A function to close modal.
`isOpenBool`
A boolean to know the state whether modal is open or not.
`domNode`
Optional.
Default value is 'root'.
Modal component uses React-Portal.
You can specify the output destination domNode with this argument
`initialValue`
Optional.
Default value is false.
This is useful when you want to mount the modal in an open position.
`preventScroll`
Optional to prevent scrolling while modal is open.
Default value is false.
`focusTrapOptions`
Override the focus-trap options used internally.
For example, to prevent a modal from closing when a non-modal element is clicked, do the following
```jsx
useModal('root', {
focusTrapOptions: {
clickOutsideDeactivates: false,
},
});
```
`components`
Optional.
This is an option to customize the `ModalWrapper` returned by useModal.
Use as follows
```jsx
useModal('root', {
components: {
Modal: ({ title, description, children }) => {
return (
{title && {title}
}
{description && {description}
}
{children}
);
},
Overlay: () => {
return (
);
},
Wrapper: ({ children }) => {
return (
{children}
);
},
},
});
```
Combined with `ModalProvider` (described below), you can specify the default style for all `useModal` in the project.
## Global Settings
The `ModalProvider` component allows you to apply a common default configuration to all `useModal` hooks.
```jsx
```
The following example sets all `useModal` hooks to not scroll outside the modal by default.
```jsx
const Component1 = () => {
const [Modal] = useModal('root');
return (
Common
);
};
const Component2 = () => {
const [Modal] = useModal('root', { preventScroll: false }); // override
return (
Override options
);
};
const App = () => {
return (
);
};
```
## Demo
https://microcmsio.github.io/react-hooks-use-modal/
## How To Develop
### Setup
```
$ yarn
```
### Build src
```
$ yarn build
```
### Watch src
```
$ yarn watch
```
### Start demo
```
$ yarn start:demo
```
Then access it on http://localhost:3001/react-hooks-use-modal
## License
MIT