useHooks

Collection of reusable hooks gathered from useHooks.com and internet.

Requirement

To use this collection, you must use react@16.8.0 or greater which includes Hooks.

Install

yarn add @geniussoft/use-hooks

useLocalStorage

Importing module to your project

import { useLocalStorage } from '@geniussoft/use-hooks';

Usage

const App = () => {
    // Similar to useState but first arg is key to the value in local storage.
    const [name, setName] = useLocalStorage('name', 'Bob');

    return (
        <div>
            <input type="text" placeholder="Enter your name" value={name} onChange={(e) => setName(e.target.value)} />
        </div>
    );
};

useKeyPress

Importing module to your project

import { useKeyPress } from '@geniussoft/use-hooks';

Usage

const App=()=> {
    // Call our hook for each key that we'd like to monitor
    const happyPress = useKeyPress('h');
    const sadPress = useKeyPress('s');
    const robotPress = useKeyPress('r');
    const foxPress = useKeyPress('f');

  return (
    <div>
      <div>h, s, r, f</div>
      <div>
        {happyPress && '😊'}
        {sadPress && '😢'}
        {robotPress && '🤖'}
        {foxPress && '🦊'}
      </div>
    </div>
}

useInterval

Source from Dan Dan Abramov's blog post

Importing module to your project

import { useInterval } from '@geniussoft/use-hooks';

useInterval(() => {
    setTime(dateTime);
}, 1000);

---

A Project by Genius Soft Pvt Ltd.

Maintained by Chathu Vishwajith.