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