React Custom Hooks for Browser Storage Management
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
| | | | | |
---|
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