@mechamobau/simplestorage

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.