0.9.0 • Published 2 years ago
reaction-react v0.9.0
Add fading reactions to an element in your react projects.
Easy and simple to use 😊
Simply import or require the component like so:
import { Reaction } from "reaction-react";And wrap it around the element you want to apply the animation to like so:
<Reaction maxExtent={300} duration={2000} amplitude={2}>
<span style={{ cursor: "pointer", fontSize: "30px" }}>🔥</span>
</Reaction>Props
| Property | Description | Default | type | Unit |
|---|---|---|---|---|
| maxExtent | This refers to the maximum height the element will animate to. | 300 | number | px |
| duration | This is the time it will take for the element to reach the maxExtent | 2000 | number | milliseconds |
| amplitude | Set the extent to with the element animates horizontally while going up to maxExtent. Use 0 to remove this effect | 2 | number | milliseconds |
| itemsBreakPoint | This adjust the way reaction elemnents clear to unclog the DOM. After a breakpoint, all elements clear after the duration set above and new elements can be added | 30 | number | - |