react-popup-provider
Usage
;; <Popup context= contextRef open <button ref=contextRef onClick=open>Open</button> > <div>My popup</div></Popup>
;; <Modal context= <button onClick=open>Open Modal</button> > <div> <span>My Modal</span> <button onClick=close>Close</button> </div> </Modal>
With Animation (react-spring)
// Modal works the same way;;; const Appear = <Transition enter= opacity: 1 from= opacity: 0 items=isOpen leave= opacity: 0 native > isOpen && </Transition>; <Popup animation=Appear context= contextRef open <button ref=contextRef onClick=open>Open</button> > <div>My popup</div></Popup>
APIs
Modal
animation
:React$ElementType
- defaults toTada
effect. Which is just show whenisOpen
istrue
.children
:({ close, left, top }) => React$Node
className
:string
close
:() => void
- Close function callback.context
:({ close, contextRef, isOpen, open, scrollableParents }) => React$Node
overlay
:({ isOpen }) => React$Node
- optional overlay element that renders toroot
. Use this if you want to control overlay's animation that doesn't get affected by the modal's animationroot
:HTMLElement
- defaults todocument.body
. This is where the portal is created.style
:object
- optional styles for the modal container
Popup
anchor
:top | bottom | left | right
animation
:React$ElementType
- defaults toTada
effect. Which is just show whenisOpen
istrue
.children
:({ close, left, top }) => React$Node
className
:string
close
:() => void
- Close function callback.context
:({ close, contextRef, isOpen, open, scrollableParents }) => React$Node
offset
:number
- Offset in pixels from the anchored positionroot
:HTMLElement
- defaults todocument.body
. This is where the portal is created.shouldCenterToContext
:boolean
- Shows the popup center to the context, if true. Defaults to false.style
:object
- optional styles for the popup container