React popup using context API
npm install react-popup-provider``javascript
import React from 'react';
import { Popup } from 'react-popup-provider';
contextRef,
open,
}) => (
)}
>
{() =>
`javascript
import React from 'react';
import { Modal } from 'react-popup-provider'; context={({ open }) => (
)}
>
{({ close }) => (
My Modal
)}
`##### With Animation (react-spring)
`javascript
// Modal works the same way
import React, { cloneElement } from 'react';
import { Popup } from 'react-popup-provider';
import { Transition } from 'react-spring';const Appear = ({ children, isOpen }) => (
enter={{ opacity: 1 }}
from={{ opacity: 0 }}
items={isOpen}
leave={{ opacity: 0 }}
native
>
{isOpen => (isOpen && (style =>
cloneElement(children, {
as: animated.div,
style
})
))}
);
animation={Appear}
context={({
contextRef,
open,
}) => (
)}
>
{() =>
My popup}
`
$3
##### Modal
*
animation: React$ElementType - defaults to Tada effect. Which is just show when isOpen is true.
* 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 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.
* 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 position
* root: HTMLElement - defaults to document.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