A React Context provider for persisting state in localStorage/sessionStorage
npm install persistent-context
A lightweight React context provider for persisting state in localStorage or sessionStorage with TypeScript support.
- 🔄 Persist React context in localStorage or sessionStorage
- 📦 Lightweight with TypeScript support and zero dependencies
- 🌳 Modern package (ESM/CJS) with full browser compatibility
``bashnpm
npm install persistent-context
Usage
$3
jsx
import { PersistentProvider, usePersistentContext } from 'persistent-context';// Wrap your app or component with PersistentProvider
const App = () => {
return (
);
};
// Use the context in your components
const YourComponent = () => {
const { state, setState } = usePersistentContext();
const handleChange = () => {
setState({ user: "John Doe" });
};
return (
{state.user || "No user"}
);
};
`$3
tsx
import { PersistentProvider, usePersistentContext } from 'persistent-context';// Define your state interface
interface UserState {
user?: string;
theme?: 'light' | 'dark';
notifications?: boolean;
}
// Provide type to the provider (with initial state)
const App = () => {
return (
storageKey="user-settings"
storageType="localStorage"
initialState={{ theme: 'light', notifications: true }}
>
);
};
// Use the typed context in your components
const UserSettings = () => {
const { state, setState } = usePersistentContext();
// Type-safe state usage
const toggleTheme = () => {
setState(prev => ({
...prev,
theme: prev.theme === 'light' ? 'dark' : 'light'
}));
};
return (
Current Theme: {state.theme}
);
};
`API
$3
Component that provides the persistent context.
tsx
storageKey?: string;
storageType?: "localStorage" | "sessionStorage";
initialState?: T;
>
{children}
`#### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
| string | "persistent-context" | Key used for storing the state in browser storage |
| storageType | "localStorage" \| "sessionStorage" | "localStorage" | Storage type to use |
| initialState | T | {} | Initial state to use when no persisted state exists |
| children | React.ReactNode | (required) | React children |$3
Hook to access the persistent context state.
`tsx
const { state, setState } = usePersistentContext();
`#### Returns
| Property | Type | Description |
|----------|------|-------------|
|
| T | The current state |
| setState | React.Dispatch | Function to update the state (supports both direct and functional updates) |Example Application
`tsx
import React from 'react';
import { PersistentProvider, usePersistentContext } from 'persistent-context';interface TodoState {
todos: Array<{ id: number; text: string; completed: boolean }>;
filter: 'all' | 'active' | 'completed';
}
const initialState: TodoState = {
todos: [],
filter: 'all'
};
const TodoApp = () => {
return (
storageKey="todo-app"
initialState={initialState}
>
);
};
const TodoList = () => {
const { state } = usePersistentContext();
const filteredTodos = state.todos.filter(todo => {
if (state.filter === 'active') return !todo.completed;
if (state.filter === 'completed') return todo.completed;
return true;
});
return (
{filteredTodos.map(todo => (
))}
);
};
// ... Additional components
export default TodoApp;
``Works in all modern browsers that support localStorage/sessionStorage (IE9+).
MIT © Deiber Chacon