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>
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 | - |