Rooks

useLocalstorageState

About

UseState but auto updates values to localStorage

Examples

Basic example

import "./styles.css";
import React from "react";
import { useLocalstorageState } from "rooks";
 
export default function App() {
  const [count, setCount] = useLocalstorageState("my-app:count", 0);
 
  return (
    <div className="App">
      <h1>Rooks : useLocalstorageState</h1>
      <p> Refresh the page to see the previous value in tact</p>
      <button onClick={() => setCount(0)}>clear</button>
      <button onClick={() => setCount(count + 1)}>Click me {count}</button>
    </div>
  );
}

Using a boolean value to toggle a sidebar

import "./styles.css";
import { useLocalstorageState } from "rooks";
 
export default function App() {
  const [
    showSidebar,
    setShowSidebar
  ] = useLocalstorageState(
    "my-app:showSidebar",
    false
  );
 
  return (
    <div className="App">
      {showSidebar ? <aside></aside> : null}
      <main>
        <button
          onClick={() =>
            setShowSidebar(!showSidebar)
          }
        >
          Toggle sidebar
        </button>
      </main>
    </div>
  );
}

Arguments

Argument valueTypeDescriptionDefualt
keystringKey of the localStorage objectundefined
defaultValueanyDefault initial valuenull

Returns

Returns an array of following items:

Return valueTypeDescription
valueanyvalue stored in localStorage
setFunctionset value stored in localStorage
removeFunctionremove value stored in localStorage

On this page