Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wowlusitong/react-use-modal
A react component for manage modal
https://github.com/wowlusitong/react-use-modal
antd modal react react-bootstrap react-hooks
Last synced: 18 days ago
JSON representation
A react component for manage modal
- Host: GitHub
- URL: https://github.com/wowlusitong/react-use-modal
- Owner: wowlusitong
- License: mit
- Created: 2019-02-03T09:24:11.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T05:19:07.000Z (almost 2 years ago)
- Last Synced: 2024-10-28T17:39:19.518Z (about 1 month ago)
- Topics: antd, modal, react, react-bootstrap, react-hooks
- Language: JavaScript
- Homepage: https://react-use-modal.netlify.com/
- Size: 1.33 MB
- Stars: 21
- Watchers: 2
- Forks: 8
- Open Issues: 36
-
Metadata Files:
- Readme: README-en.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `react-use-modal`
- awesome-react-hooks-cn - `react-use-modal`
- awesome-react-hooks - `react-use-modal`
- awesome-react-hooks - `react-use-modal`
README
# react-use-modal
Most of the mainstream modal needs to use the state control in the component to display whether it is inconvenient to call in multiple places, so it is easier to provide based on [context](https://reactjs.org/docs/context.html#api) The method of calling.
`use-modal` supports the mainstream modal. In theory, as long as the modal is controlled by something like `show props`, it can be supported, for example:
- [antd](https://github.com/ant-design/ant-design)
- [react-bootstrap](https://react-bootstrap.github.io/components/modal/)
- [react-overlays](https://github.com/react-bootstrap/react-overlays)
- [react-modals](https://github.com/reactjs/react-modal)
- [material-ui](https://material-ui.com/utils/modal/)
## Installation
Use yarn
```
$ yarn add react-use-modal
```
Or use npm
```
$ npm install react-use-modal --save
```
## Use
Put `ModalProvider` in the outer layer of the component
```js
Import ReactDOM from 'react-dom';
Import { ModalProvider } from 'react-use-modal';
ReactDOM.render(
...
,
document.querySelector('#root')
)
```
Call mode, with react-bootstrap example
Use context
```js
Import React from 'react';
Import { Modal } from 'react-bootstrap';
Import { ModalContext } from 'react-use-modal';
Export default class App extends React.Component {
handleClick = () => {
Const {showModal, closeModal} = this.context;
showModal(({ show }) => (
body
))
}
Render() {
Return (
click
)
}
}
Product.contextType = ModalContext
```
Use hooks
```js
Import React from 'react';
Import { Modal } from 'react-bootstrap';
Import { useModal } from 'react-use-modal';
Const App = () => {
Const { showModal, closeModal } = useModal();
Function handleClick() {
showModal(({ show }) => (
Modal title
Modal body text goes here.
))
}
Return (
modal
)
}
```
## API
#### showModal
Show modal, set `show` to true
##### Parameters
Component(?Function):
The first call must pass a parameter, and the call again can be ignored.
```js
showModal(props => (
body
))
```
Component props
Name|Type|Default|Description
-|-|-|-
Show|boolean|false| Whether to display modal
#### closeModal
Turn off modal and set `show` to false
---
by google translate