@jeact/hooks
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    @jeact/hooks

    Jeact Logo

    NPM Travis (.com) Libraries.io dependency status for latest release npm npm bundle size npm GitHub Repo stars

    Some hooks to handle states in a very easy way.

    @jeact/hooks its a module made to avoid writing some repeating code in React, like the toggle functionality, or the loading functionality.

    Instalation

    npm i @jeact/hooks
    

    Hooks

    useBoolean

    Returns a boolean value, and two functions, one to make the boolean true and another to make it false.

    useLoading

    Returns the same as useBoolean, but this hook has a more-expressive name.

    useToggle

    Returns a boolean value and a function to toggle the value between true and false.

    useLocalStorage

    Returns a like-state value getted from localStorage and a function to change it and store its new value in localStorage (its like a React state, but it will save the value in localStorage).

    useSteppedIncrement

    WARNING: This hook has some warnings, see the final of this section to see them

    Returs 4 things, the first two are a numeric state, and a function, once the function is called, the number will be incrementing its value one by one to reach 'limit' in 'duration' miliseconds. The other one is a CONDITION state, which value deppends on the condition of the incremental. 0 means not started, 1 means started and in progress ans 2 means ended. And the final thing returned is a function to restart the incremental.

    WARNINGS:

    • If you put very high 'max' values and low time, the real time it will take to reach the max number will be higher, please verify this.

    • A bad use of the startIncrement function can result in a react error: Too many re-renders. React limits the number of renders to prevent an infinite loop..

    • It's recomended to put the useSteppedIncrement hook in a short component, this avoids to re-render all the big component.

    • This is a bug that I don't know how to fix, but, if you unmount the component while the increment is active, this will result in a react warning: Can't perform a React state update on an unmounted.

    So, as you can see, this hook works, but you need to be very careful.

    useSequence

    Returns a value of the given possible values and to functions, one to make the value the next and one to make it the previous (if the value is for example the last one in the possible values and you use the next function then its gonna return the first value).

    You can see this hook like a roulette, you have one value, and you can spin the roulette in any direction, and is always gonna repeat the same values in same order, if you return to the first value and go back, you will get the last one, and if you go to the last value and go to the next, you'll get the first one.

    useDramaticValue

    THIS HOOK DOES NOT WORK YET, AND I KNOW HOW TO FIX IT:(

    WARNING: This hook has the same warnings as the useSteppedIncremental

    Returs 4 things, the first two are a numeric state, and a function, once the function is called, the number will be randomly change its value ultil duration miliseconds have passed once the function was called. The other one is a CONDITION state, which value deppends on the condition of the dramatic. 0 means not started, 1 means started and in progress ans 2 means ended. And the final thing returned is a function to restart the dramatic.

    Install

    npm i @jeact/hooks

    DownloadsWeekly Downloads

    12

    Version

    1.3.1

    License

    ISC

    Unpacked Size

    31.1 kB

    Total Files

    22

    Last publish

    Collaborators

    • jebbarbas