Simple Storage
The module to simplify the usage of Storage API in React.js
Installation
This library is published in the NPM registry and can be installed using any compatible package manager.
npm install simplestorage --save
# For Yarn, use the command below.
yarn add simplestorage
Installation from CDN
This module has an UMD bundle available through JSDelivr and Unpkg CDNs.
<!-- For UNPKG use the code below. -->
<script src="https://unpkg.com/@mechamobau/simplestorage"></script>
<!-- For JSDelivr use the code below. -->
<script src="https://cdn.jsdelivr.net/npm/@mechamobau/simplestorage"></script>
<script>
// UMD module is exposed through the "simpleStorage" global variable.
console.log(simpleStorage);
</script>
Usage
This module needs to be used inside a functional component. The useStorage
hook
return value
from Storage API and setValue
change that value.
import React, { useState } from 'react';
import { useStorage } from '@mechamobau/simplestorage';
const Todo = () => {
const [value, setValue] = useStorage('<YOUR-LOCAL-STORAGE-KEY>', {
placeholder: 'undone'
});
const [status, setStatus] = useState(false)
handleClick = () => {
setValue(status ? 'done' : 'undone')
setStatus(!status);
};
return (
<p>Todo Status: {value}</p>
<button onClick={handleClick}>Toggle Status</button>
);
};
Documentation
Documentation generated from source files by Typedoc.
License
Released under MIT License.