overlay-reveal-effect

Overlay reveal effect react-component.

Props

Name	Type	Default	Description
children	node		The content node to be showed.
direction	string	top-right	Direction the child node will enter from.
isOpen	boolean	false	If true, the component will transition in.
mainFon	string	#90caf9	The main background color.
secondaryFon	string	#ec407a	The secondary background color of overlay.

Example

DEMO

import React, {useState} from 'react';
import OverlayEffect from 'overlay-reveal-effect';

class App extends React.Component {
  render() {
    const [open, setOpen] = useState(false);
    
    const handleOpen = () => {
      setOpen(true);
    };
    
    const handleClose = () => {
      setOpen(false);
    }

    return (
      <div>
        <button onClick={handleOpen}>OPEN</button>
        
        <OverlayEffect isOpen={open}>
          <h1>Overlay Effect</h1>
          <button onClick={handleClose}>CLOSE</button>
        </OverlayEffect>
      </div>
    )
  }
}