react-ext-hooks

It is a library of React hooks that extends its capabilities.

Content:

Install

Usage

Store hooks:

useLocalStorage() 🪝

useSessionStorage() 🪝

Render hook:

useReRender() 🪝

Other:

Examples in CodeSandbox

Install

npm:

npm i react-ext-hooks

yarn:

yarn add react-ext-hooks

Import

To import all the hooks, use:

import {
  useLocalStorage,
  useSessionStorage,
  useReRender,
} from "react-ext-hooks";

...or you can import only the ones you need.

Usage

useLocalStorage

🪝🪝🪝 Description 💁

useLocalStorage is a hook for React that allows you to write to local storage data in the format of simple types or your objects. The hook also allows you to read data from local storage and causes the component to re-render when the data in local storage changes. In case there is no data in the local storage, the hook will write and return the default value you specify.

API 🚩

useLocalStorage(key: string, defaultValue?:T, options?:Options)

Returns [value, setValue] when called. The return values work similarly to their counterparts in setState() hook.

key: string Key for identifying the value to be stored.

defaultValue?: T Default value. The argument is optional, but it is better to specify it in case the value is absent in the storage. Values of type object pass serialization on writing (default JSON.stringify()) and parsing on reading (default JSON.parse()).

options?: Options Optional argument, has the following properties:

options: {
    syncData?: boolean,
    serializer?: function,
    parser?: function,
    logger?: function,
};

syncData?: boolean Allows you to synchronize value change events between different hook instances. The default value is true.

serializer?: function Allows you to specify your serializer function instead of the default. The default function is JSON.stringify.

parser?: function Allows you to specify your parser function instead of the default. The default function is JSON.parse.

logger?: function Allows you to specify your own error logging function instead of the default. The default function is console.log.

Example ✏

The most basic use of a hook involves calling the hook function with one parameter - the name of the local storage key. However, it is recommended to use it with a second parameter - the default value:

//local-storage-input.js file:
import {useLocalStorage} from  "react-ext-hooks";

export function LocalStorageInput() {
  const [value, setValue] = useLocalStorage("example1", "Default text");
  return (
    <>
      <div>The text bellow is stored in Local Storage:</div>
      <input
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
    </>
  );
};

//add to usage file:
<LocalStorageInput />

Features ✅

✓ Built-in work with different data, including objects

✓ Support SSR

✓ Synchronization between all hook calls when data changes

✓ Written with TypeScript

useSessionStorage

🪝🪝🪝 Description 💁

useSessionStorage is a hook for React that allows you to write to session storage data in the format of simple types or your objects. The hook also allows you to read data from session storage and causes the component to re-render when the data in session storage changes. In case there is no data in the session storage, the hook will write and return the default value you specify.

API 🚩

useSessionStorage(key: string, defaultValue?:T, options?:Options)

Returns [value, setValue] when called. The return values work similarly to their counterparts in setState() hook.

key: string Key for identifying the value to be stored.

defaultValue?: T Default value. The argument is optional, but it is better to specify it in case the value is absent in the storage. Values of type object pass serialization on writing (default JSON.stringify()) and parsing on reading (default JSON.parse()).

options?: Options Optional argument, has the following properties:

options: {
    syncData?: boolean,
    serializer?: function,
    parser?: function,
    logger?: function,
};

syncData?: boolean Allows you to synchronize value change events between different hook instances. The default value is true.

serializer?: function Allows you to specify your serializer function instead of the default. The default function is JSON.stringify.

parser?: function Allows you to specify your parser function instead of the default. The default function is JSON.parse.

logger?: function Allows you to specify your own error logging function instead of the default. The default function is console.log.

Example ✏

The most basic use of a hook involves calling the hook function with one parameter - the name of the session storage key. However, it is recommended to use it with a second parameter - the default value:

//session-storage-input.js file:
import {useSessionStorage} from  "react-ext-hooks";

export function SessionStorageInput() {
  const [value, setValue] = useSessionStorage("example1", "Default text");
  return (
    <>
      <div>The text bellow is stored in Session Storage:</div>
      <input
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
    </>
  );
};

//add to usage file:
<SessionStorageInput />

Features ✅

✓ Built-in work with different data, including objects

✓ Support SSR

✓ Synchronization between all hook calls when data changes

✓ Written with TypeScript

useReRender

🪝🪝🪝 Description 💁

useReRender this is a very simple hook that returns a function that, when called, re-renders the component in which the hook is declared.

API 🚩

useReRender()

Returns callReRender function when called. You need to call this function when you need to rerender callReRender().

Example ✏

//rerender-tesp-panel.js file:
import {useReRender} from  "react-ext-hooks";

export function ReRenderTestPanel() {
  const callReRender = useReRender();
  const renderCount = useRef(0);
  useEffect(function onReRender() {
    renderCount.current++;
  });
  return (
    <div>
      <div className="re_render_panel">
        <div>Current render count: {renderCount.current}</div>
        <button onClick={() => callReRender()}>Call render</button>
      </div>
    </div>
  );
};

//add to usage file:
<ReRenderTestPanel />

Features ✅

✓ Support SSR

✓ Written with TypeScript

Other

🔥 All the examples of usage react-ext-hooks are in the sandbox.