@feca-hooks/use-fadein
React Hook to add fade-in animation faster and easier.
How to Install
yarn
yarn add @feca-hooks/use-fadein
npm
npm i @feca-hooks/use-fadein
Usage
Code
import React from "react";
import useFadeIn from "@feca-hooks/use-fadein";
function App() {
// Arguments: fromOpacity, toOpacity, duration, cubicBezier, delay
const fadeIn = useFadeIn(0.3, 1, 0.5, "ease-in-out", 0.5);
return <h1 { ...fadeIn }>Hello, There!</h1>;
}
Arguments
Argument | Type | Description | Required | Default value |
---|---|---|---|---|
fromOpacity | number | Start opacity of fade-in animation. | no | 0 |
toOpacity | number | End opacity of fade-in animation. | no | 1 |
duration | number | Duration of fade-in animation. | no | 0.3 |
cubicBezier | string | Cubic bezier of fade-in animation. | no | "linear" |
delay | number | Animation delay of fade-in animation. | no | 0 |
Return
Return value | Type | Description | Default value |
---|---|---|---|
Properties(ref , style ) |
object | An object containing properties of element you want to apply fade-in animation. | { ref: element, style: { opacity: fromOpacity } } |