@buzuosheng/use-localstorage NPM

use-localstorage

A lightweight React Hook for elegant localStorage management with support for data expiration and namespace functionality.

✨ Features

🚀 Data expiration support
🔖 Namespace (prefix) support
💪 Full TypeScript support
🎯 Automatic serialization and deserialization
🔄 Cross-tab synchronization
🛡️ Type-safe implementation

📦 Installation

# Using npm
npm install @buzuosheng/use-localstorage

# Using yarn
yarn add @buzuosheng/use-localstorage

# Using pnpm
pnpm add @buzuosheng/use-localstorage

🔨 Usage

import { useLocalStorage } from '@buzuosheng/use-localstorage';

// Basic usage
const [value, setValue] = useLocalStorage('key');

// With expiration time and prefix
const [value, setValue] = useLocalStorage('key', {
  age: '7d',        // Supports: 's'(seconds), 'm'(minutes), 'h'(hours), 'd'(days)
  prefix: 'app:',   // Custom prefix
  initialValue: 'default' // Initial value
});

📝 API

useLocalStorage(key, options?)

Parameters

Parameter	Type	Required	Default	Description
key	string	Yes	-	localStorage key name
options	object	No	-	Configuration options

Options

Option	Type	Default	Description
age	string	'7d'	Data expiration time
prefix	string	'Prefix:'	Key prefix
initialValue	any	undefined	Initial value

Return Value

[storedValue, setValue]: [T | undefined, (value: T) => void]

🌰 Examples

Basic Usage

import { useLocalStorage } from '@buzuosheng/use-localstorage';

function App() {
  const [name, setName] = useLocalStorage('name', {
    age: '1d',
    initialValue: 'John'
  });

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

Storing Objects

interface User {
  name: string;
  age: number;
}

function App() {
  const [user, setUser] = useLocalStorage<User>('user', {
    initialValue: { name: 'John', age: 25 }
  });

  return (
    <div>
      <input
        value={user?.name}
        onChange={(e) => setUser({ ...user, name: e.target.value })}
      />
    </div>
  );
}