Welcome to the documentation for the useLocalStorage Hook! This utility simplifies working with browser localStorage in React applications. Below are key details and examples to help you get started.

🧾 Features

  • ✅ Persistent state across page reloads
  • ⚙️ Type-safe data handling
  • 🔍 Easy debugging with console.log support
  • 🛡️ Secure storage for non-sensitive data

📌 Installation

To use this Hook, first install the package:

npm install react-use-localstorage

Then import it into your React components:

import useLocalStorage from 'react-use-localStorage';

🧪 Example Usage

function App() {
  const [storedValue, setStoredValue] = useLocalStorage('my_key', 'default_value');
  
  return (
    <div>
      <p>Current value: {storedValue}</p>
      <button onClick={() => setStoredValue('new_value')}>
        Update Local Storage
      </button>
    </div>
  );
}

📌 Notes

  • 📌 Use null as the second argument to disable default value
  • 📌 Data is stored as strings - use JSON.stringify() for objects
  • 📌 For secure data, consider using IndexedDB instead

📌 Related Resources

Need more help? Explore our React Hooks guide for advanced usage patterns and best practices.

useLocalStorage