https://github.com/sakalx/overlay-reveal-effect
React overlay reveal effect component
https://github.com/sakalx/overlay-reveal-effect
animate animation effect overlay react reveal transition transition-animation
Last synced: 2 months ago
JSON representation
React overlay reveal effect component
- Host: GitHub
- URL: https://github.com/sakalx/overlay-reveal-effect
- Owner: sakalx
- License: mit
- Created: 2019-04-22T22:37:06.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-05T22:15:51.000Z (about 6 years ago)
- Last Synced: 2024-03-23T17:21:36.675Z (about 1 year ago)
- Topics: animate, animation, effect, overlay, react, reveal, transition, transition-animation
- Language: JavaScript
- Homepage: https://sakalx.github.io/overlay-reveal-effect
- Size: 198 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://sakalx.github.io/overlay-reveal-effect/)
```javascript
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 (
OPEN
Overlay Effect
CLOSE
)
}
}
```