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

0.0.10 • Public • Published

useHooks

npm NPM npm bundle size npm type definitions npm

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.

Package Sidebar

Install

npm i @geniussoft/use-hooks

Weekly Downloads

1

Version

0.0.10

License

MIT

Unpacked Size

9.86 kB

Total Files

22

Last publish

Collaborators

  • iamchathu