Nevertheless Published Mine

    @feca-hooks/use-fadein

    1.0.2 • Public • Published

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

    Install

    npm i @feca-hooks/use-fadein

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    3.07 kB

    Total Files

    4

    Last publish

    Collaborators

    • pshtony1