importReactfrom'react';import{Modal}from'react-popup-provider';<Modalcontext={({ open })=>(<buttononClick={open}>Open Modal</button>)}>{({ close })=>(<div><span>My Modal</span><buttononClick={close}>Close</button></div>)}</Modal>
With Animation (react-spring)
// Modal works the same wayimportReact,{cloneElement}from'react';import{Popup}from'react-popup-provider';import{Transition}from'react-spring';constAppear=({ children, isOpen })=>(<Transitionenter={{opacity: 1}}from={{opacity: 0}}items={isOpen}leave={{opacity: 0}}native>{isOpen=>(isOpen&&(style=>cloneElement(children,{as: animated.div,
style
})))}</Transition>);<Popupanimation={Appear}context={({
contextRef,
open,})=>(<buttonref={contextRef}onClick={open}>Open</button>)}>{()=><div>My popup</div>}</Popup>
APIs
Modal
animation: React$ElementType - defaults to Tada effect. Which is just show when isOpen is true.
isOpen: boolean - if you need controlled open state, then use this
overlay: ({ isOpen }) => React$Node - optional overlay element that renders to root. Use this if you want to control overlay's animation that doesn't get affected by the modal's animation
root: HTMLElement - defaults to document.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 to Tada effect. Which is just show when isOpen is true.