React Animated Popup
React animated popup is a lightweight zero-dependency module to make elements become popups and animate in and out.
Demo
Try the interactive demo here.
Installation
npm install --save react-animated-popup
Usage
Import Popup and use the component like the snippet. Note that you will need to update your visibility state on the onClose
event.
The Popup element can be placed anywhere in your DOM! Just make sure it is not inside a position: absolute/relative
element.
The children can be anything you want! Create a popup for your purpose.
If you want more usage help check out the demo repository code here.
import Popup from 'react-animated-popup'
// ...
const [visible, setVisible] = useState(false)
return (
<Popup visible={visible} onClose={() => setVisible(false)}>
<p>I am a popup!</p>
</Popup>
)
Props
children
- optional
- type:
ReactNode
Children to make up the popup.
visible
- required
- type:
boolean
The prompt state, make true to make the prompt appear.
onClose
- required
- type:
CloseHandler
Function called when closing. It is recommended to update your visible state to false on this callback.
animationDuration
- optional
- type:
number
- default:
100
The duration of the animations in ms.
style
- optional
- type:
CSSProperties
Override styling to the popup div. Per default, it has a white background, rounded corners, and shadow. Everything can be overridden and it can be designed however you like!
className
Classname to add to the popup div.