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

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

Powered by vercel