Repository: soyguijarro/react-storage-hooks
Branch: master
Commit: bd0a73e7c08e
Files: 23
Total size: 45.9 KB
Directory structure:
gitextract_0_crk56n/
├── .gitignore
├── .npmrc
├── .travis.yml
├── LICENSE
├── README.md
├── examples/
│ ├── .storybook/
│ │ └── main.js
│ ├── package.json
│ ├── src/
│ │ ├── Examples.stories.tsx
│ │ └── react-app-env.d.ts
│ └── tsconfig.json
├── package.json
├── src/
│ ├── common.ts
│ ├── index.ts
│ ├── reducer.ts
│ ├── state.ts
│ └── tests/
│ ├── reducer.node.test.ts
│ ├── reducer.test-d.ts
│ ├── reducer.test.ts
│ ├── state.node.test.ts
│ ├── state.test-d.ts
│ ├── state.test.ts
│ └── utils.ts
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# Next.js build output
.next
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
================================================
FILE: .npmrc
================================================
message="Version %s"
================================================
FILE: .travis.yml
================================================
language: node_js
node_js: lts/*
cache: npm
before_script: npm install codecov -g
script: npm run check
after_success: codecov
deploy:
provider: npm
email: $NPM_EMAIL
api_key: $NPM_TOKEN
skip_cleanup: true
on:
tags: true
branch: master
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) Ramón Guijarro
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# react-storage-hooks
[](https://www.npmjs.com/package/react-storage-hooks)
[](https://travis-ci.com/soyguijarro/react-storage-hooks)
[](https://codecov.io/gh/soyguijarro/react-storage-hooks)
[](https://github.com/soyguijarro/react-storage-hooks/blob/master/LICENSE)
Custom [React hooks](https://reactjs.org/docs/hooks-intro) for keeping application state in sync with `localStorage` or `sessionStorage`.
:book: **Familiar API**. You already know how to use this library! Replace [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate) and [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) hooks with the ones in this library and get persistent state for free.
:sparkles: **Fully featured**. Automatically stringifies and parses values coming and going to storage, keeps state in sync between tabs by listening to [storage events](https://developer.mozilla.org/docs/Web/API/StorageEvent) and handles non-straightforward use cases correctly.
:zap: **Tiny and fast**. Less than 700 bytes gzipped, enforced with [`size-limit`](https://github.com/ai/size-limit). No external dependencies. Only reads from storage when necessary and writes to storage after rendering.
:capital_abcd: **Completely typed**. Written in TypeScript. Type definitions included and verified with [`tsd`](https://github.com/SamVerschueren/tsd).
:muscle: **Backed by tests**. Full coverage of the API.
## Requirements
You need to use [version 16.8.0](https://github.com/facebook/react/blob/master/CHANGELOG.md#1680-february-6-2019) or greater of React, since that's the first one to include hooks. If you still need to create your application, [Create React App](https://create-react-app.dev/) is the officially supported way.
## Installation
Add the package to your React project:
npm install --save react-storage-hooks
Or with yarn:
yarn add react-storage-hooks
## Usage
The `useStorageState` and `useStorageReducer` hooks included in this library work like [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate) and [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer). The only but important differences are:
- Two additional mandatory parameters: [**`Storage` object**](https://developer.mozilla.org/en-US/docs/Web/API/Storage) (`localStorage` or `sessionStorage`) and **storage key**.
- Initial state parameters only apply if there's no data in storage for the provided key. Otherwise data from storage will be used as initial state. Think about it as **default** or **fallback state**.
- The array returned by hooks has an extra last item for **write errors**. It is initially `undefined`, and will be updated with [`Error` objects](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error) thrown by `Storage.setItem`. However the hook will keep updating state even if new values fail to be written to storage, to ensure that your application doesn't break.
### `useStorageState`
#### Example
```javascript
import React from 'react';
import { useStorageState } from 'react-storage-hooks';
function StateCounter() {
const [count, setCount, writeError] = useStorageState(
localStorage,
'state-counter',
0
);
return (
<>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
{writeError && (
<pre>Cannot write to localStorage: {writeError.message}</pre>
)}
</>
);
}
```
#### Signature
```typescript
function useStorageState<S>(
storage: Storage,
key: string,
defaultState?: S | (() => S)
): [S, React.Dispatch<React.SetStateAction<S>>, Error | undefined];
```
### `useStorageReducer`
#### Example
```javascript
import React from 'react';
import { useStorageReducer } from 'react-storage-hooks';
function reducer(state, action) {
switch (action.type) {
case 'inc':
return { count: state.count + 1 };
case 'dec':
return { count: state.count - 1 };
default:
return state;
}
}
function ReducerCounter() {
const [state, dispatch, writeError] = useStorageReducer(
localStorage,
'reducer-counter',
reducer,
{ count: 0 }
);
return (
<>
<p>You clicked {state.count} times</p>
<button onClick={() => dispatch({ type: 'inc' })}>+</button>
<button onClick={() => dispatch({ type: 'dec' })}>-</button>
{writeError && (
<pre>Cannot write to localStorage: {writeError.message}</pre>
)}
</>
);
}
```
#### Signature
```typescript
function useStorageReducer<S, A>(
storage: Storage,
key: string,
reducer: React.Reducer<S, A>,
defaultState: S
): [S, React.Dispatch<A>, Error | undefined];
function useStorageReducer<S, A, I>(
storage: Storage,
key: string,
reducer: React.Reducer<S, A>,
defaultInitialArg: I,
defaultInit: (defaultInitialArg: I) => S
): [S, React.Dispatch<A>, Error | undefined];
```
## Advanced usage
### Alternative storage objects
The `storage` parameter of the hooks can be any object that implements the `getItem`, `setItem` and `removeItem` methods of the [`Storage` interface](https://developer.mozilla.org/en-US/docs/Web/API/Storage). Keep in mind that storage values will be automatically [serialized](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and [parsed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) before and after calling these methods.
```typescript
interface Storage {
getItem(key: string): string | null;
setItem(key: string, value: string): void;
removeItem(key: string): void;
}
```
### Server-side rendering (SSR)
This library checks for the existence of the `window` object and even has some [tests in a node-like environment](https://jestjs.io/docs/en/configuration#testenvironment-string). However in your server code you will need to provide a storage object to the hooks that works server-side. A simple solution is to use a dummy object like this:
```javascript
const dummyStorage = {
getItem: () => null,
setItem: () => {},
removeItem: () => {},
};
```
The important bit here is to have the `getItem` method return `null`, so that the default state parameters of the hooks get applied as initial state.
### Convenience custom hook
If you're using a few hooks in your application with the same type of storage, it might bother you to have to specify the storage object all the time. To alleviate this, you can write a custom hook like this:
```javascript
import { useStorageState } from 'react-storage-hooks';
export function useLocalStorageState(...args) {
return useStorageState(localStorage, ...args);
}
```
And then use it in your components:
```javascript
import { useLocalStorageState } from './my-hooks';
function Counter() {
const [count, setCount] = useLocalStorageState('counter', 0);
// Rest of the component
}
```
## Development
Install development dependencies:
npm install
To set up the examples:
npm run examples:setup
To start a server with the examples in watch mode (reloads whenever examples or library code change):
npm run examples:watch
### Tests
Run tests:
npm test
Run tests in watch mode:
npm run test:watch
See code coverage information:
npm run test:coverage
### Publish
Go to the `master` branch:
git checkout master
Bump the version number:
npm version [major | minor | patch]
Run the release script:
npm run release
All code quality checks will run, the tagged commit generated by `npm version` will be pushed and [Travis CI](https://travis-ci.com/github/soyguijarro/react-storage-hooks) will publish the new package version to the npm registry.
## License
This library is [MIT licensed](LICENSE).
================================================
FILE: examples/.storybook/main.js
================================================
module.exports = {
stories: ['../src/**/*.stories.tsx'],
addons: ['@storybook/preset-create-react-app'],
};
================================================
FILE: examples/package.json
================================================
{
"private": true,
"scripts": {
"start": "start-storybook -p 9009 -s public --ci",
"build": "build-storybook -s public"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@storybook/preset-create-react-app": "^2.1.1",
"@storybook/react": "^5.3.18",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.6",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1",
"typescript": "^3.8.3"
}
}
================================================
FILE: examples/src/Examples.stories.tsx
================================================
import React from 'react';
import { useStorageState, useStorageReducer } from 'react-storage-hooks';
export function StateCounter() {
const [count, setCount, writeError] = useStorageState(
localStorage,
'state-counter',
0
);
return (
<>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
{writeError && (
<pre>Cannot write to localStorage: {writeError.message}</pre>
)}
</>
);
}
function reducer(state: { count: number }, action: { type: 'inc' | 'dec' }) {
switch (action.type) {
case 'inc':
return { count: state.count + 1 };
case 'dec':
return { count: state.count - 1 };
default:
return state;
}
}
export function ReducerCounter() {
const [state, dispatch, writeError] = useStorageReducer(
localStorage,
'reducer-counter',
reducer,
{ count: 0 }
);
return (
<>
<p>You clicked {state.count} times</p>
<button onClick={() => dispatch({ type: 'inc' })}>+</button>
<button onClick={() => dispatch({ type: 'dec' })}>-</button>
{writeError && (
<pre>Cannot write to localStorage: {writeError.message}</pre>
)}
</>
);
}
export default { title: 'Examples' };
================================================
FILE: examples/src/react-app-env.d.ts
================================================
/// <reference types="react-scripts" />
================================================
FILE: examples/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
================================================
FILE: package.json
================================================
{
"name": "react-storage-hooks",
"version": "4.0.1",
"description": "React hooks for persistent state",
"keywords": [
"react",
"react-hooks",
"persistent",
"useState",
"useReducer",
"storage",
"localstorage",
"sessionstorage"
],
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"lint": "eslint src/*.ts",
"fmt": "prettier --check *.md *.json src/*.ts",
"types": "tsd",
"test": "jest",
"test:watch": "npm test -- --watch",
"test:coverage": "npm test -- --coverage",
"test:staged": "npm test -- --findRelatedTests --bail",
"prebuild": "del dist",
"build": "tsc",
"build:watch": "npm run build -- --watch",
"size": "size-limit",
"precheck": "npm run build",
"check": "run-s lint fmt types test:coverage size",
"examples:setup": "cd examples && npm install && npm link ../.",
"examples:start": "cd examples && npm start",
"examples:watch": "run-p build:watch examples:start",
"prerelease": "npm run check",
"release": "git push --follow-tags origin master"
},
"files": [
"dist",
"dist/index.d.ts"
],
"author": "Ramón Guijarro <hola@soyguijarro.com>",
"license": "MIT",
"repository": "https://github.com/soyguijarro/react-storage-hooks",
"peerDependencies": {
"react": "^16.8.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"prettier": {
"singleQuote": true
},
"eslintConfig": {
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint",
"react-hooks"
],
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:react-app/recommended",
"prettier",
"prettier/@typescript-eslint"
],
"rules": {
"no-console": "error",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "error",
"@typescript-eslint/explicit-function-return-type": "off"
},
"settings": {
"react": {
"version": "detect"
}
}
},
"lint-staged": {
"*.{md,json}": "prettier --write",
"*.ts": [
"prettier --write",
"eslint --fix",
"npm run test:staged"
]
},
"jest": {
"moduleFileExtensions": [
"ts",
"js"
],
"preset": "ts-jest",
"testMatch": [
"**/src/tests/*.test.ts"
],
"coveragePathIgnorePatterns": [
"/node_modules/",
"<rootDir>/src/tests/"
],
"coverageThreshold": {
"global": {
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
}
}
},
"tsd": {
"directory": "src"
},
"size-limit": [
{
"limit": "700 B",
"path": "dist/index.js"
}
],
"devDependencies": {
"@size-limit/preset-small-lib": "^4.4.5",
"@testing-library/react-hooks": "^3.2.1",
"@types/jest": "^25.2.1",
"@types/react": "^16.9.34",
"@typescript-eslint/eslint-plugin": "^2.28.0",
"@typescript-eslint/parser": "^2.28.0",
"del-cli": "^3.0.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-react-app": "^6.2.2",
"eslint-plugin-react-hooks": "^3.0.0",
"husky": "^4.2.5",
"jest": "^25.3.0",
"lint-staged": "^10.1.5",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.13.1",
"react-test-renderer": "^16.13.1",
"size-limit": "^4.4.5",
"ts-jest": "^25.4.0",
"tsd": "^0.11.0",
"typescript": "^3.8.3"
}
}
================================================
FILE: src/common.ts
================================================
import { useState, useEffect, useRef, useMemo } from 'react';
export type StorageObj = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
function fromStorage<T>(value: string | null) {
return value !== null ? (JSON.parse(value) as T) : null;
}
function readItem<T>(storage: StorageObj, key: string) {
try {
const storedValue = storage.getItem(key);
return fromStorage<T>(storedValue);
} catch (e) {
return null;
}
}
function toStorage<T>(value: T | null) {
return JSON.stringify(value);
}
function writeItem<T>(storage: StorageObj, key: string, value: T | null) {
try {
if (value !== null) {
storage.setItem(key, toStorage<T>(value));
} else {
storage.removeItem(key);
}
return Promise.resolve();
} catch (error) {
return Promise.reject(error);
}
}
export function useInitialState<S>(
storage: StorageObj,
key: string,
defaultState: S
) {
const defaultStateRef = useRef(defaultState);
return useMemo(() => readItem<S>(storage, key) ?? defaultStateRef.current, [
key,
storage,
]);
}
export function useStorageWriter<S>(
storage: StorageObj,
key: string,
state: S
) {
const [writeError, setWriteError] = useState<Error | undefined>(undefined);
useEffect(() => {
writeItem<S>(storage, key, state).catch((error) => {
if (!error || !error.message || error.message !== writeError?.message) {
setWriteError(error);
}
});
if (writeError) {
return () => {
setWriteError(undefined);
};
}
}, [state, key, writeError, storage]);
return writeError;
}
export function useStorageListener<S>(
storage: StorageObj,
key: string,
defaultState: S,
onChange: (newValue: S) => void
) {
const defaultStateRef = useRef(defaultState);
const onChangeRef = useRef(onChange);
const firstRun = useRef(true);
useEffect(() => {
if (firstRun.current) {
firstRun.current = false;
return;
}
onChangeRef.current(readItem<S>(storage, key) ?? defaultStateRef.current);
}, [key, storage]);
useEffect(() => {
function onStorageChange(event: StorageEvent) {
if (event.key === key) {
onChangeRef.current(
fromStorage<S>(event.newValue) ?? defaultStateRef.current
);
}
}
if (
typeof window !== 'undefined' &&
typeof window.addEventListener !== 'undefined'
) {
window.addEventListener('storage', onStorageChange);
return () => {
window.removeEventListener('storage', onStorageChange);
};
}
}, [key]);
}
================================================
FILE: src/index.ts
================================================
export { default as useStorageState } from './state';
export { default as useStorageReducer } from './reducer';
================================================
FILE: src/reducer.ts
================================================
import { useReducer, Reducer, Dispatch } from 'react';
import {
useInitialState,
useStorageListener,
useStorageWriter,
StorageObj,
} from './common';
const FORCE_STATE_ACTION = '__FORCE_STATE_INTERNAL_API__';
type ForceStateAction<S> = { type: typeof FORCE_STATE_ACTION; payload: S };
function isForceStateAction<S, A>(
action: A | ForceStateAction<S>
): action is ForceStateAction<S> {
return (
typeof action === 'object' &&
action !== null &&
'type' in action &&
action.type === FORCE_STATE_ACTION
);
}
function addForceStateActionToReducer<S, A>(reducer: Reducer<S, A>) {
return (state: S, action: A | ForceStateAction<S>) => {
if (isForceStateAction(action)) return action.payload;
return reducer(state, action);
};
}
function useStorageReducer<S, A>(
storage: StorageObj,
key: string,
reducer: Reducer<S, A>,
defaultState: S
): [S, Dispatch<A>, Error | undefined];
function useStorageReducer<S, A, I>(
storage: StorageObj,
key: string,
reducer: Reducer<S, A>,
defaultInitialArg: I,
defaultInit: (defaultInitialArg: I) => S
): [S, Dispatch<A>, Error | undefined];
function useStorageReducer<S, A, I = S>(
storage: StorageObj,
key: string,
reducer: Reducer<S, A>,
defaultInitialArg: I,
defaultInit: (defaultInitialArg: I | S) => S = (x) => x as S
): [S, Dispatch<A>, Error | undefined] {
const defaultState = defaultInit(defaultInitialArg);
const [state, dispatch] = useReducer(
addForceStateActionToReducer(reducer),
useInitialState(storage, key, defaultState)
);
useStorageListener(storage, key, defaultState, (newValue: S) => {
dispatch({ type: FORCE_STATE_ACTION, payload: newValue });
});
const writeError = useStorageWriter(storage, key, state);
return [state, dispatch, writeError];
}
export default useStorageReducer;
================================================
FILE: src/state.ts
================================================
import { useState, Dispatch, SetStateAction } from 'react';
import {
useInitialState,
useStorageListener,
useStorageWriter,
StorageObj,
} from './common';
function useStorageState<S>(
storage: StorageObj,
key: string,
defaultState: S | (() => S)
): [S, Dispatch<SetStateAction<S>>, Error | undefined];
function useStorageState<S>(
storage: StorageObj,
key: string
): [S | null, Dispatch<SetStateAction<S | null>>, Error | undefined];
function useStorageState<S>(
storage: StorageObj,
key: string,
defaultState: S | (() => S) | null = null
) {
const [state, setState] = useState(
useInitialState(storage, key, defaultState)
);
useStorageListener(storage, key, defaultState, setState);
const writeError = useStorageWriter(storage, key, state);
return [state, setState, writeError];
}
export default useStorageState;
================================================
FILE: src/tests/reducer.node.test.ts
================================================
/**
* @jest-environment node
*/
import { renderHook } from '@testing-library/react-hooks';
import { useStorageReducer } from '..';
import { storageLikeObject } from './utils';
function reducer(state: { value: number }) {
return state;
}
it('returns default state', () => {
const { result } = renderHook(() =>
useStorageReducer(storageLikeObject, 'key', reducer, {
value: 0,
})
);
const [state] = result.current;
expect(state).toStrictEqual({ value: 0 });
});
it('returns default state (lazy initialization)', () => {
const { result } = renderHook(() =>
useStorageReducer(storageLikeObject, 'key', reducer, 0, value => ({
value,
}))
);
const [state] = result.current;
expect(state).toStrictEqual({ value: 0 });
});
================================================
FILE: src/tests/reducer.test-d.ts
================================================
/* eslint-disable react-hooks/rules-of-hooks */
import { Dispatch } from 'react';
import { expectType, expectError } from 'tsd';
import { useStorageReducer } from '..';
import { storageLikeObject } from './utils';
type State = { value: number };
type Action = { type: 'inc' | 'dec' };
function reducer(state: State, action: Action) {
switch (action.type) {
case 'inc':
return { value: state.value + 1 };
case 'dec':
return { value: state.value - 1 };
default:
return state;
}
}
const [state, dispatch, writeError] = useStorageReducer(
localStorage,
'key',
reducer,
{ value: 0 }
);
expectType<State>(state);
expectType<Dispatch<Action>>(dispatch);
expectType<Error | undefined>(writeError);
expectError(() => dispatch({ type: 'other' }));
const [otherState, otherDispatch] = useStorageReducer(
localStorage,
'key',
reducer,
0,
value => ({ value })
);
expectType<State>(otherState);
expectType<Dispatch<Action>>(otherDispatch);
useStorageReducer(storageLikeObject, 'key', reducer, { value: 0 });
expectError(() => useStorageReducer());
expectError(() => useStorageReducer(localStorage));
expectError(() => useStorageReducer(localStorage, 'key'));
expectError(() => useStorageReducer(localStorage, 'key', reducer));
expectError(() => useStorageReducer({}, 'key', reducer, { value: 0 }));
expectError(() => useStorageReducer(localStorage, 0, reducer, { value: 0 }));
expectError(() =>
useStorageReducer(localStorage, 'key', () => 0, { value: 0 })
);
expectError(() =>
useStorageReducer(localStorage, 'key', reducer, { value: 'value' })
);
expectError(() =>
useStorageReducer(localStorage, 'key', reducer, 'value', value => ({ value }))
);
================================================
FILE: src/tests/reducer.test.ts
================================================
import { renderHook, act } from '@testing-library/react-hooks';
import { useStorageReducer } from '..';
import {
mockStorageError,
mockStorageErrorOnce,
fireStorageEvent,
} from './utils';
afterEach(() => {
localStorage.clear();
jest.restoreAllMocks();
});
function reducer(state: { value: number }, action: { type: 'inc' | 'dec' }) {
switch (action.type) {
case 'inc':
return { value: state.value + 1 };
case 'dec':
return { value: state.value - 1 };
default:
return state;
}
}
describe('initialization', () => {
it('returns storage value when available', () => {
localStorage.setItem('key', '{"value":1}');
const { result } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, {
value: 0,
})
);
const [state] = result.current;
expect(state).toStrictEqual({ value: 1 });
});
it('returns default state when storage empty and writes it to storage', () => {
const { result } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, { value: 0 })
);
const [state] = result.current;
expect(state).toStrictEqual({ value: 0 });
expect(localStorage.getItem('key')).toBe('{"value":0}');
});
it('returns default state when storage empty and writes it to storage (lazy initialization)', () => {
const { result } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, 0, value => ({ value }))
);
const [state] = result.current;
expect(state).toStrictEqual({ value: 0 });
expect(localStorage.getItem('key')).toBe('{"value":0}');
});
it('returns default state when storage reading fails', () => {
mockStorageErrorOnce(localStorage, 'getItem', 'Error message');
localStorage.setItem('key', '{"value":1}');
const { result } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, { value: 0 })
);
const {
current: [state],
} = result;
expect(state).toStrictEqual({ value: 0 });
});
});
describe('updates', () => {
it('returns new state and writes to storage', () => {
const { result } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, { value: 0 })
);
const [, dispatch] = result.current;
act(() => dispatch({ type: 'inc' }));
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 1 });
expect(localStorage.getItem('key')).toBe('{"value":1}');
});
it('returns new state and write error when storage writing fails once', async () => {
mockStorageErrorOnce(localStorage, 'setItem', 'Error message');
const { result, waitForNextUpdate } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, { value: 0 })
);
const [, dispatch] = result.current;
act(() => dispatch({ type: 'inc' }));
await waitForNextUpdate();
const [newState, , writeError] = result.current;
expect(newState).toStrictEqual({ value: 1 });
expect(writeError).toEqual(Error('Error message'));
});
it('returns new state and previous write error when storage writing fails multiple times', async () => {
mockStorageError(localStorage, 'setItem', 'Error message');
const { result, waitForNextUpdate } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, { value: 0 })
);
const [, dispatch] = result.current;
act(() => dispatch({ type: 'inc' }));
await waitForNextUpdate();
const [, newDispatch, writeError] = result.current;
expect(writeError).toEqual(Error('Error message'));
act(() => newDispatch({ type: 'inc' }));
await waitForNextUpdate();
const [, , newWriteError] = result.current;
expect(newWriteError).toEqual(Error('Error message'));
});
it('returns new state and no previous write error when storage writing works after failing', async () => {
mockStorageErrorOnce(localStorage, 'setItem', 'Error message');
const { result, waitForNextUpdate } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, { value: 0 })
);
const [, dispatch] = result.current;
act(() => dispatch({ type: 'inc' }));
await waitForNextUpdate();
const [, newDispatch, writeError] = result.current;
expect(writeError).toEqual(Error('Error message'));
act(() => newDispatch({ type: 'inc' }));
const [, , newWriteError] = result.current;
expect(newWriteError).toBeUndefined();
});
it('returns same state when default state changes', () => {
localStorage.setItem('key', '{"value":1}');
const { result, rerender } = renderHook(
defaultState =>
useStorageReducer(localStorage, 'key', reducer, defaultState),
{ initialProps: { value: 0 } }
);
rerender({ value: 2 });
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 1 });
});
it('returns same state when storage empty and default state changes', () => {
const { result, rerender } = renderHook(
defaultState =>
useStorageReducer(localStorage, 'key', reducer, defaultState),
{ initialProps: { value: 0 } }
);
rerender({ value: 1 });
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 0 });
});
it('returns new state when storage event fired for key', () => {
const { result } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, { value: 0 })
);
act(() => fireStorageEvent('key', '{"value":1}'));
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 1 });
});
it('returns same state when storage event fired for key and storage empty', () => {
const { result } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, { value: 0 })
);
act(() => fireStorageEvent('key', null));
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 0 });
});
it('returns same state when storage event fired for other key', () => {
const { result } = renderHook(() =>
useStorageReducer(localStorage, 'key', reducer, { value: 0 })
);
act(() => {
fireStorageEvent('other-key', '{"value":1}');
});
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 0 });
});
});
describe('resetting', () => {
it('returns new storage value when key changes and storage value available', () => {
localStorage.setItem('new-key', '{"value":1}');
const { result, rerender } = renderHook(
key => useStorageReducer(localStorage, key, reducer, { value: 0 }),
{
initialProps: 'key',
}
);
rerender('new-key');
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 1 });
});
it('returns default state when key changes and storage empty', () => {
localStorage.setItem('key', '{"value":1}');
const { result, rerender } = renderHook(
key => useStorageReducer(localStorage, key, reducer, { value: 0 }),
{
initialProps: 'key',
}
);
rerender('new-key');
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 0 });
});
it('returns no previous write error when key changes', async () => {
mockStorageErrorOnce(localStorage, 'setItem', 'Error message');
const { result, rerender, waitForNextUpdate } = renderHook(
key => useStorageReducer(localStorage, key, reducer, { value: 0 }),
{ initialProps: 'key' }
);
const [, dispatch] = result.current;
act(() => dispatch({ type: 'inc' }));
await waitForNextUpdate();
const [, , writeError] = result.current;
expect(writeError).toEqual(Error('Error message'));
rerender('new-key');
const [, , newWriteError] = result.current;
expect(newWriteError).toBeUndefined();
});
it('writes to new key when key changes', () => {
localStorage.setItem('key', '{"value":1}');
localStorage.setItem('new-key', '{"value":2}');
const { result, rerender } = renderHook(
key => useStorageReducer(localStorage, key, reducer, { value: 0 }),
{
initialProps: 'key',
}
);
rerender('new-key');
const [, dispatch] = result.current;
act(() => dispatch({ type: 'inc' }));
expect(localStorage.getItem('key')).toStrictEqual('{"value":1}');
expect(localStorage.getItem('new-key')).toStrictEqual('{"value":3}');
});
});
================================================
FILE: src/tests/state.node.test.ts
================================================
/**
* @jest-environment node
*/
import { renderHook } from '@testing-library/react-hooks';
import { useStorageState } from '..';
import { storageLikeObject } from './utils';
it('returns default state', () => {
const { result } = renderHook(() =>
useStorageState(storageLikeObject, 'key', { value: 0 })
);
const [state] = result.current;
expect(state).toStrictEqual({ value: 0 });
});
it('returns default state (lazy initialization)', () => {
const { result } = renderHook(() =>
useStorageState(storageLikeObject, 'key', () => ({ value: 0 }))
);
const [state] = result.current;
expect(state).toStrictEqual({ value: 0 });
});
================================================
FILE: src/tests/state.test-d.ts
================================================
/* eslint-disable react-hooks/rules-of-hooks */
import { Dispatch, SetStateAction } from 'react';
import { expectType, expectError } from 'tsd';
import { useStorageState } from '..';
import { storageLikeObject } from './utils';
type SetState<S> = Dispatch<SetStateAction<S>>;
const [inferredString, setInferredString, writeError] = useStorageState(
localStorage,
'key',
'test'
);
expectType<string>(inferredString);
expectType<SetState<string>>(setInferredString);
expectType<Error | undefined>(writeError);
expectError(() => setInferredString(0));
const [inferredNumber, setInferredNumber] = useStorageState(
localStorage,
'key',
0
);
expectType<number>(inferredNumber);
expectType<SetState<number>>(setInferredNumber);
expectError(() => setInferredNumber('test'));
const [inferredNumberLazy, setInferredNumberLazy] = useStorageState(
localStorage,
'key',
() => 0
);
expectType<number>(inferredNumberLazy);
expectType<SetState<number>>(setInferredNumberLazy);
expectError(() => setInferredNumberLazy('test'));
const [declaredNumber, setDeclaredNumber] = useStorageState<number>(
localStorage,
'key'
);
expectType<number | null>(declaredNumber);
expectType<SetState<number | null>>(setDeclaredNumber);
expectError(() => setDeclaredNumber('test'));
const [unknown, setUnknown] = useStorageState(localStorage, 'key');
expectType<unknown>(unknown);
expectType<SetState<unknown>>(setUnknown);
useStorageState(storageLikeObject, 'key', 0);
expectError(() => useStorageState());
expectError(() => useStorageState(localStorage));
expectError(() => useStorageState({}, 'key'));
expectError(() => useStorageState(localStorage, 0));
================================================
FILE: src/tests/state.test.ts
================================================
import { renderHook, act } from '@testing-library/react-hooks';
import { useStorageState } from '..';
import {
mockStorageError,
mockStorageErrorOnce,
fireStorageEvent,
} from './utils';
afterEach(() => {
localStorage.clear();
jest.restoreAllMocks();
});
describe('initialization', () => {
it('returns storage value when available', () => {
localStorage.setItem('key', '{"value":1}');
const { result } = renderHook(() =>
useStorageState(localStorage, 'key', { value: 0 })
);
const [state] = result.current;
expect(state).toStrictEqual({ value: 1 });
});
it('returns default state when storage empty and writes it to storage', () => {
const { result } = renderHook(() =>
useStorageState(localStorage, 'key', { value: 0 })
);
const [state] = result.current;
expect(state).toStrictEqual({ value: 0 });
expect(localStorage.getItem('key')).toBe('{"value":0}');
});
it('returns default state when storage empty and writes it to storage (lazy initialization)', () => {
const { result } = renderHook(() =>
useStorageState(localStorage, 'key', () => ({ value: 0 }))
);
const [state] = result.current;
expect(state).toStrictEqual({ value: 0 });
expect(localStorage.getItem('key')).toBe('{"value":0}');
});
it('returns null when storage empty and no default provided', () => {
const { result } = renderHook(() => useStorageState(localStorage, 'key'));
const [state] = result.current;
expect(state).toBeNull();
});
it('returns default state when storage reading fails', () => {
mockStorageErrorOnce(localStorage, 'getItem', 'Error message');
localStorage.setItem('key', '{"value":1}');
const { result } = renderHook(() =>
useStorageState(localStorage, 'key', { value: 0 })
);
const {
current: [state],
} = result;
expect(state).toStrictEqual({ value: 0 });
});
it('returns null when storage reading fails and no default provided', () => {
mockStorageErrorOnce(localStorage, 'getItem', 'Error message');
localStorage.setItem('key', '{"value":1}');
const { result } = renderHook(() => useStorageState(localStorage, 'key'));
const {
current: [state],
} = result;
expect(state).toBeNull();
});
});
describe('updates', () => {
it('returns new state and writes to storage', () => {
const { result } = renderHook(() =>
useStorageState(localStorage, 'key', { value: 0 })
);
const [, setState] = result.current;
act(() => setState({ value: 1 }));
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 1 });
expect(localStorage.getItem('key')).toBe('{"value":1}');
});
it('returns new state and write error when storage writing fails once', async () => {
mockStorageErrorOnce(localStorage, 'setItem', 'Error message');
const { result, waitForNextUpdate } = renderHook(() =>
useStorageState(localStorage, 'key', { value: 0 })
);
const [, setState] = result.current;
act(() => setState({ value: 1 }));
await waitForNextUpdate();
const [newState, , writeError] = result.current;
expect(newState).toStrictEqual({ value: 1 });
expect(writeError).toEqual(Error('Error message'));
});
it('returns new state and previous write error when storage writing fails multiple times', async () => {
mockStorageError(localStorage, 'setItem', 'Error message');
const { result, waitForNextUpdate } = renderHook(() =>
useStorageState(localStorage, 'key', { value: 0 })
);
const [, setState] = result.current;
act(() => setState({ value: 1 }));
await waitForNextUpdate();
const [, newSetState, writeError] = result.current;
expect(writeError).toEqual(Error('Error message'));
act(() => newSetState({ value: 2 }));
await waitForNextUpdate();
const [, , newWriteError] = result.current;
expect(newWriteError).toEqual(Error('Error message'));
});
it('returns new state and no previous write error when storage writing works after failing', async () => {
mockStorageErrorOnce(localStorage, 'setItem', 'Error message');
const { result, waitForNextUpdate } = renderHook(() =>
useStorageState(localStorage, 'key', { value: 0 })
);
const [, setState] = result.current;
act(() => setState({ value: 1 }));
await waitForNextUpdate();
const [, newSetState, writeError] = result.current;
expect(writeError).toEqual(Error('Error message'));
act(() => newSetState({ value: 2 }));
const [, , newWriteError] = result.current;
expect(newWriteError).toBeUndefined();
});
it('returns same state when default state changes', () => {
localStorage.setItem('key', '{"value":1}');
const { result, rerender } = renderHook(
defaultState => useStorageState(localStorage, 'key', defaultState),
{ initialProps: { value: 0 } }
);
rerender({ value: 2 });
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 1 });
});
it('returns same state when storage empty and default state changes', () => {
const { result, rerender } = renderHook(
defaultState => useStorageState(localStorage, 'key', defaultState),
{ initialProps: { value: 0 } }
);
rerender({ value: 1 });
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 0 });
});
it('returns null and removes key from storage when null provided', () => {
localStorage.setItem('key', '{"value":1}');
const { result } = renderHook(() =>
useStorageState<{ value: number } | null>(localStorage, 'key', {
value: 0,
})
);
const [, setState] = result.current;
act(() => setState(null));
const [newState] = result.current;
expect(newState).toBeNull();
expect(localStorage.getItem('key')).toBeNull();
});
it('returns new state when storage event fired for key', () => {
const { result } = renderHook(() =>
useStorageState(localStorage, 'key', 0)
);
act(() => fireStorageEvent('key', '{"value":1}'));
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 1 });
});
it('returns same state when storage event fired for key and storage empty', () => {
const { result } = renderHook(() =>
useStorageState(localStorage, 'key', { value: 0 })
);
act(() => fireStorageEvent('key', null));
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 0 });
});
it('returns same state when storage event fired for other key', () => {
const { result } = renderHook(() =>
useStorageState(localStorage, 'key', { value: 0 })
);
act(() => {
fireStorageEvent('other-key', '{"value":1}');
});
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 0 });
});
});
describe('resetting', () => {
it('returns new storage value when key changes and storage value available', () => {
localStorage.setItem('new-key', '{"value":1}');
const { result, rerender } = renderHook(
key => useStorageState(localStorage, key, { value: 0 }),
{
initialProps: 'key',
}
);
rerender('new-key');
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 1 });
});
it('returns default state when key changes and storage empty', () => {
localStorage.setItem('key', '1');
const { result, rerender } = renderHook(
key => useStorageState(localStorage, key, { value: 0 }),
{
initialProps: 'key',
}
);
rerender('new-key');
const [newState] = result.current;
expect(newState).toStrictEqual({ value: 0 });
});
it('returns null when key changes, storage empty and no default provided', () => {
localStorage.setItem('key', '{"value":1}');
const { result, rerender } = renderHook(
key => useStorageState(localStorage, key),
{
initialProps: 'key',
}
);
rerender('new-key');
const [newState] = result.current;
expect(newState).toBeNull();
});
it('returns no previous write error when key changes', async () => {
mockStorageErrorOnce(localStorage, 'setItem', 'Error message');
const { result, rerender, waitForNextUpdate } = renderHook(
key => useStorageState(localStorage, key, { value: 0 }),
{ initialProps: 'key' }
);
const [, setState] = result.current;
act(() => setState({ value: 1 }));
await waitForNextUpdate();
const [, , writeError] = result.current;
expect(writeError).toEqual(Error('Error message'));
rerender('new-key');
const [, , newWriteError] = result.current;
expect(newWriteError).toBeUndefined();
});
it('writes to new key when key changes', () => {
localStorage.setItem('key', '{"value":1}');
localStorage.setItem('new-key', '{"value":2}');
const { result, rerender } = renderHook(
key => useStorageState(localStorage, key, { value: 0 }),
{
initialProps: 'key',
}
);
rerender('new-key');
const [, setState] = result.current;
act(() => setState({ value: 3 }));
expect(localStorage.getItem('key')).toBe('{"value":1}');
expect(localStorage.getItem('new-key')).toBe('{"value":3}');
});
});
================================================
FILE: src/tests/utils.ts
================================================
function getStorageSpy(storage: Storage, method: 'getItem' | 'setItem') {
// Cannot mock Storage methods directly: https://github.com/facebook/jest/issues/6798
return jest.spyOn(Object.getPrototypeOf(storage), method);
}
export function mockStorageError(
storage: Storage,
method: 'getItem' | 'setItem',
errorMessage: string
) {
getStorageSpy(storage, method).mockImplementation(() => {
throw new Error(errorMessage);
});
}
export function mockStorageErrorOnce(
storage: Storage,
method: 'getItem' | 'setItem',
errorMessage: string
) {
getStorageSpy(storage, method).mockImplementationOnce(() => {
throw new Error(errorMessage);
});
}
export function fireStorageEvent(key: string, value: string | null) {
window.dispatchEvent(new StorageEvent('storage', { key, newValue: value }));
}
export const storageLikeObject = {
getItem: (key: string) => null,
/* eslint-disable @typescript-eslint/no-empty-function */
setItem: (key: string, value: string) => {},
removeItem: (key: string) => {},
/* eslint-enable @typescript-eslint/no-empty-function */
};
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": ["es2016", "dom"],
"jsx": "react",
"declaration": true,
"sourceMap": true,
"outDir": "./dist/",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true
},
"include": ["src/index.ts"]
}
gitextract_0_crk56n/ ├── .gitignore ├── .npmrc ├── .travis.yml ├── LICENSE ├── README.md ├── examples/ │ ├── .storybook/ │ │ └── main.js │ ├── package.json │ ├── src/ │ │ ├── Examples.stories.tsx │ │ └── react-app-env.d.ts │ └── tsconfig.json ├── package.json ├── src/ │ ├── common.ts │ ├── index.ts │ ├── reducer.ts │ ├── state.ts │ └── tests/ │ ├── reducer.node.test.ts │ ├── reducer.test-d.ts │ ├── reducer.test.ts │ ├── state.node.test.ts │ ├── state.test-d.ts │ ├── state.test.ts │ └── utils.ts └── tsconfig.json
SYMBOL INDEX (27 symbols across 9 files)
FILE: examples/src/Examples.stories.tsx
function StateCounter (line 5) | function StateCounter() {
function reducer (line 24) | function reducer(state: { count: number }, action: { type: 'inc' | 'dec'...
function ReducerCounter (line 35) | function ReducerCounter() {
FILE: src/common.ts
type StorageObj (line 3) | type StorageObj = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
function fromStorage (line 5) | function fromStorage<T>(value: string | null) {
function readItem (line 9) | function readItem<T>(storage: StorageObj, key: string) {
function toStorage (line 18) | function toStorage<T>(value: T | null) {
function writeItem (line 22) | function writeItem<T>(storage: StorageObj, key: string, value: T | null) {
function useInitialState (line 35) | function useInitialState<S>(
function useStorageWriter (line 48) | function useStorageWriter<S>(
function useStorageListener (line 72) | function useStorageListener<S>(
FILE: src/reducer.ts
constant FORCE_STATE_ACTION (line 10) | const FORCE_STATE_ACTION = '__FORCE_STATE_INTERNAL_API__';
type ForceStateAction (line 11) | type ForceStateAction<S> = { type: typeof FORCE_STATE_ACTION; payload: S };
function isForceStateAction (line 13) | function isForceStateAction<S, A>(
function addForceStateActionToReducer (line 24) | function addForceStateActionToReducer<S, A>(reducer: Reducer<S, A>) {
function useStorageReducer (line 46) | function useStorageReducer<S, A, I = S>(
FILE: src/state.ts
function useStorageState (line 21) | function useStorageState<S>(
FILE: src/tests/reducer.node.test.ts
function reducer (line 10) | function reducer(state: { value: number }) {
FILE: src/tests/reducer.test-d.ts
type State (line 9) | type State = { value: number };
type Action (line 10) | type Action = { type: 'inc' | 'dec' };
function reducer (line 12) | function reducer(state: State, action: Action) {
FILE: src/tests/reducer.test.ts
function reducer (line 15) | function reducer(state: { value: number }, action: { type: 'inc' | 'dec'...
FILE: src/tests/state.test-d.ts
type SetState (line 9) | type SetState<S> = Dispatch<SetStateAction<S>>;
FILE: src/tests/utils.ts
function getStorageSpy (line 1) | function getStorageSpy(storage: Storage, method: 'getItem' | 'setItem') {
function mockStorageError (line 6) | function mockStorageError(
function mockStorageErrorOnce (line 16) | function mockStorageErrorOnce(
function fireStorageEvent (line 26) | function fireStorageEvent(key: string, value: string | null) {
Condensed preview — 23 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (50K chars).
[
{
"path": ".gitignore",
"chars": 1708,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n\n# Diagnostic reports (https://nodejs."
},
{
"path": ".npmrc",
"chars": 20,
"preview": "message=\"Version %s\""
},
{
"path": ".travis.yml",
"chars": 254,
"preview": "language: node_js\nnode_js: lts/*\ncache: npm\nbefore_script: npm install codecov -g\nscript: npm run check\nafter_success: c"
},
{
"path": "LICENSE",
"chars": 1066,
"preview": "MIT License\n\nCopyright (c) Ramón Guijarro\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\n"
},
{
"path": "README.md",
"chars": 8438,
"preview": "# react-storage-hooks\n\n[](https://www.npmjs.com/package/"
},
{
"path": "examples/.storybook/main.js",
"chars": 112,
"preview": "module.exports = {\n stories: ['../src/**/*.stories.tsx'],\n addons: ['@storybook/preset-create-react-app'],\n};\n"
},
{
"path": "examples/package.json",
"chars": 713,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"start\": \"start-storybook -p 9009 -s public --ci\",\n \"build\": \"build-storybook"
},
{
"path": "examples/src/Examples.stories.tsx",
"chars": 1322,
"preview": "import React from 'react';\n\nimport { useStorageState, useStorageReducer } from 'react-storage-hooks';\n\nexport function S"
},
{
"path": "examples/src/react-app-env.d.ts",
"chars": 40,
"preview": "/// <reference types=\"react-scripts\" />\n"
},
{
"path": "examples/tsconfig.json",
"chars": 491,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n "
},
{
"path": "package.json",
"chars": 3496,
"preview": "{\n \"name\": \"react-storage-hooks\",\n \"version\": \"4.0.1\",\n \"description\": \"React hooks for persistent state\",\n \"keyword"
},
{
"path": "src/common.ts",
"chars": 2571,
"preview": "import { useState, useEffect, useRef, useMemo } from 'react';\n\nexport type StorageObj = Pick<Storage, 'getItem' | 'setIt"
},
{
"path": "src/index.ts",
"chars": 112,
"preview": "export { default as useStorageState } from './state';\nexport { default as useStorageReducer } from './reducer';\n"
},
{
"path": "src/reducer.ts",
"chars": 1836,
"preview": "import { useReducer, Reducer, Dispatch } from 'react';\n\nimport {\n useInitialState,\n useStorageListener,\n useStorageWr"
},
{
"path": "src/state.ts",
"chars": 859,
"preview": "import { useState, Dispatch, SetStateAction } from 'react';\n\nimport {\n useInitialState,\n useStorageListener,\n useStor"
},
{
"path": "src/tests/reducer.node.test.ts",
"chars": 769,
"preview": "/**\n * @jest-environment node\n */\n\nimport { renderHook } from '@testing-library/react-hooks';\n\nimport { useStorageReduce"
},
{
"path": "src/tests/reducer.test-d.ts",
"chars": 1702,
"preview": "/* eslint-disable react-hooks/rules-of-hooks */\n\nimport { Dispatch } from 'react';\nimport { expectType, expectError } fr"
},
{
"path": "src/tests/reducer.test.ts",
"chars": 8417,
"preview": "import { renderHook, act } from '@testing-library/react-hooks';\n\nimport { useStorageReducer } from '..';\nimport {\n mock"
},
{
"path": "src/tests/state.node.test.ts",
"chars": 655,
"preview": "/**\n * @jest-environment node\n */\n\nimport { renderHook } from '@testing-library/react-hooks';\n\nimport { useStorageState "
},
{
"path": "src/tests/state.test-d.ts",
"chars": 1656,
"preview": "/* eslint-disable react-hooks/rules-of-hooks */\n\nimport { Dispatch, SetStateAction } from 'react';\nimport { expectType, "
},
{
"path": "src/tests/state.test.ts",
"chars": 9325,
"preview": "import { renderHook, act } from '@testing-library/react-hooks';\n\nimport { useStorageState } from '..';\nimport {\n mockSt"
},
{
"path": "src/tests/utils.ts",
"chars": 1095,
"preview": "function getStorageSpy(storage: Storage, method: 'getItem' | 'setItem') {\n // Cannot mock Storage methods directly: htt"
},
{
"path": "tsconfig.json",
"chars": 312,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"commonjs\",\n \"lib\": [\"es2016\", \"dom\"],\n \"jsx\": \"react\""
}
]
About this extraction
This page contains the full source code of the soyguijarro/react-storage-hooks GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 23 files (45.9 KB), approximately 12.7k tokens, and a symbol index with 27 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.