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
;; Component { const open setOpen = ; const handleOpen = { ; }; const handleClose = { ; } return <div> <button onClick=handleOpen>OPEN</button> <OverlayEffect isOpen=open> <h1>Overlay Effect</h1> <button onClick=handleClose>CLOSE</button> </OverlayEffect> </div> }