Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mattjennings/react-modal-stack
A simple, flexible, zero-dependency modal stack manager for React.
https://github.com/mattjennings/react-modal-stack
Last synced: about 8 hours ago
JSON representation
A simple, flexible, zero-dependency modal stack manager for React.
- Host: GitHub
- URL: https://github.com/mattjennings/react-modal-stack
- Owner: mattjennings
- License: mit
- Created: 2020-08-01T22:30:07.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T21:44:48.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T01:21:27.588Z (7 months ago)
- Language: TypeScript
- Size: 8.58 MB
- Stars: 13
- Watchers: 4
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-modal-stack
A simple, flexible, zero-dependency modal stack manager for React.
[Live Demo](https://mattjennings.github.io/react-modal-stack/)
## Install
```
npm install @mattjennings/react-modal-stack
```
## Usage
Add `` to the root of your App
```jsx
import React from 'react'
import { ModalStack } from '@mattjennings/react-modal-stack'
import App from './App'
React.render(
,
document.querySelector('#root')
)
```
Create a Modal component. It doesn't matter how you style it, it just needs to receive an `open` prop.
```jsx
import React from 'react'
import { useModals } from '@mattjennings/react-modal-stack'
function Modal({ open, title, message }) {
const { closeModal } = useModals()
if (!open) {
return null
}
return (
{title}
{message}
{
closeModal()
}}
>
Close
)
}
```
Open the modal
```jsx
import React from 'react'
import { useModals } from '@mattjennings/react-modal-stack'
import Modal from './Modal'
function OpenModal() {
const { openModal } = useModals()
return (
{
openModal(Modal, {
title: 'Hello',
message: 'This is your modal',
})
}}
>
Open Modal
)
}
```
## Animating
`ModalStack` provides a `renderModals` prop to take control of rendering the modals. This lets you use a library like [framer-motion](https://github.com/framer/motion) to animate your transitions between modals.
See the [framer-motion example](/stories/Animated.stories.tsx) to see how it works.
## API
#### ``
| Props | Type | Description |
| ------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------- |
| renderModals | ({ stack }) => React.ReactNode | If you want to take control on how the modals are rendered (eg. adding animations), you can do so here. |
#### `useModals()`
| Method | Description |
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| openModal(component, props, options?: { replace }) | Opens the component provided as the modal.
If `replace: true` is provided for `options`, it will dismiss & replace the currently displayed modal in the stack. |
| closeModal | Dismisses the current modal |
| closeModals(amount) | Dismisses the amount of modals off the stack |
| closeAllModals() | Dismisses all modals |
| stack | The current stack of modals |