react-ext-hooks

It is a library of React hooks that extends its capabilities. Both types of modules (ESM / CommonJS) are supported.

Content:

Install

Usage

Store hooks:

useLocalStorage() 🪝

useSessionStorage() 🪝

Render hook:

useReRender() 🪝

useRsizeObserver() 🪝

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

useResizeObserver

🪝🪝🪝 Description 💁

useResizeObserver this is a simple hook that allows to observe for resizes of a ref containing an HTML element.

API 🚩

To watch the entire page use: useResizeObserver(watchEntirePage: true)

or to watch an component use overload function: useResizeObserver(elementRef: React.MutableRefObject, parentLevel?:number)

Returns object {width?: number, height?: number} when called. Property width of return object contain width of element or page in pixels. Property height of return object contain height of element or page in pixels;

watchEntirePage: true Pass this argument with true value to watch the entire page.

elementRef: React.MutableRefObject Reference to an element defined using a react hook useRef.

parentLevel?:number Optional argument, is needed to watch the parent HTML element. The parent level is specified by a number passed in this argument/

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:

//resize-counter.js file:
import { useResizeObserver } from 'react-ext-hooks';

function ResizeCounter() {
  const resizeCount = useRef(0);
  const { width, height } = useResizeObserver({
    watchEntirePage: true,
  });
  useEffect(
    function onReRender() {
      resizeCount.current++;
    },
    [width, height]
  );
  return (
    <div>
      <div>Current resize count: {resizeCount.current}</div>
      <div>Current width: {width}</div>
      <div>Current height: {height}</div>
    </div>
  );
}
//add to usage file:
<ResizeCounter />;

Features ✅

✓ Polyfill is used

✓ Support SSR

✓ Written with TypeScript

Other

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