React Custom Hooks for Browser Storage Management
![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-mkx-storage)
This package provides three custom React hooks for managing state in local storage, session storage and cookie storage: useLocalStorage
, useSessionStorage
and useCookieStorage
.
Installation
You can install the package using npm:
npm install react-mkx-storage
Or using yarn:
yarn add react-mkx-storage
useLocalStorage
A custom React hook to manage state in local storage.
Parameters
key
(string): The key under which to store the value in local storage.initialValue
(string | number | object | array): The initial value to use if no value is found in local storage.
Usage
import { useLocalStorage } from 'react-mkx-storage';
const MyComponent = () => {
const [value, setValue] = useLocalStorage('key', 'initialValue');
return (
);
};
useSessionStorage
A custom React hook to manage state in session storage.
Parameters
key
(string): The key under which to store the value in session storage.initialValue
(string | number | object | array): The initial value to use if no value is found in session storage.
Usage
import { useSessionStorage } from 'react-mkx-storage';
const MyComponent = () => {
const [value, setValue] = useSessionStorage('key', 'initialValue');
return (
);
};
useCookieStorage
A custom React hook to manage state in Cookie storage.
Parameters
key
(string): The key under which to store the value in Cookie storage.initialValue
(string | number | object | array): The initial value to use if no value is found in Cookie storage.
Usage
import { useCookieStorage } from 'react-mkx-storage';
const MyComponent = () => {
const [value, setValue] = useCookieStorage('key', 'initialValue');
return (
);
};
Browser Support
![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |
---|
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |
License
This project is licensed under the ISC License - see the LICENSE file for details.
Author
Mani Kant Sharma
![GitHub](https://img.shields.io/badge/-GitHub-181717?style=for-the-badge&logo=github&logoColor=white)