0.9.71 • Published 2 months ago
react-modal-observer v0.9.71
React Modal Observer
React modal observer allows you to create a modal from anywhere without using context and passing down props to the component, with just a function!
Installation
$ npm install --save react-modal-observer
$ yarn add react-modal-observer
Features
- It works with lazy loading
- You can pass down props to the modal component
- Typescript support: It will infer the props of the modal component
- You can set default styles for the modal container and overwrite them in the addModal function
- You can set a custom animation for the modal
- You can set a spinner component to show while the modal is loading
Usage
import React from 'react'
import { Modals, addModal } from 'react-modal-observer'
export default function App() {
const handleOpen = () => {
addModal(TestModal, { description: 'This is a test modal' }, { backgroundColor: 'green' })
}
return (
<>
<main>
<button onClick={handleOpen}>Open Modal</button>
</main>
<Modals
backgroundColor="rgba(0, 0, 0, 0.5)"
duration={250} // miliseconds
/* NOTE: You can't use `animationType` at the same time as `customAnimation`. */
animationType="fade" // 'none' | 'fade' | 'fade-with-scale' | 'slide-left' | 'slide-right'
noScroll={true} // Prevents html scrolling when the modal is open
timingFunction="ease"
Spinner={<div className='spinner' />} // Component to show while the modal is loading
customAnimation={
parentClassName: 'page-center' // .page-center: { justify-content: center }
classNames: {
enter: 'custom-enter',
enterActive: 'custom-enter-active',
exit: 'custom-exit',
exitActive: 'custom-exit-active',
}
}
/>
</>
)
}
const TestModal = ({ description, closeModal }) => {
return (
<div>
<button onClick={closeModal}>Close Modal</button>
<h1>Test Modal</h1>
{description}
</div>
)
}
0.9.71
2 months ago
0.9.70
2 months ago
0.9.67
4 months ago
0.9.68
4 months ago
0.9.65
4 months ago
0.9.66
4 months ago
0.9.6
5 months ago
0.9.43
5 months ago
0.9.44
5 months ago
0.9.42
5 months ago
0.9.38
5 months ago
0.9.37
5 months ago
0.9.36
5 months ago
0.9.35
5 months ago
0.9.3
5 months ago
0.9.2
5 months ago
0.9.1
5 months ago
0.9.0
5 months ago