README

react-use-storage

Easy use key-value storage in React. LocalStorage, SessionStorage, AsyncStorage and any other key-value storages.

Install

// yarn
yarn add @wakeup/react-use-storage

// npm
npm i --save @wakeup/react-use-storage

How to use

Hooks out of the box: useLocalStorage, useSessionStorage

import { useLocalStorage } from '@wakeup/react-use-storage';

const App: FunctionComponent = () => {
    const [colorScheme, setColorScheme] = useLocalStorage({
        key: 'colorScheme',
        initialValue: 'dark',
    });

    return (
        <div>
            <h1>Current color scheme: {colorScheme}</h1>
            <button onClick={() => setColorScheme('light')}>Light</button>
            <button onClick={() => setColorScheme('dark')}>Dark</button>
        </div>
    );
};

Custom key-value storage

import { inMemoryStorage } from 'awesome-im-memory-storage';
import { useStorage } from '@wakeup/react-use-storage';

const App: FunctionComponent = () => {
    const [colorScheme, setColorScheme] = useStorage({
        key: 'colorScheme',
        initialValue: 'dark',
        storage: inMemoryStorage,
    });

    return (
        <div>
            <h1>Current color scheme: {colorScheme}</h1>
            <button onClick={() => setColorScheme('light')}>Light</button>
            <button onClick={() => setColorScheme('dark')}>Dark</button>
        </div>
    );
};

Async storage

import { awesomeAsyncStorage } from 'awesome-async-storage';
import { useAsyncStorage } from '@wakeup/react-use-storage';

const App: FunctionComponent = () => {
    const [colorScheme, setColorScheme] = useAsyncStorage({
        key: 'colorScheme',
        initialValue: 'dark',
        storage: awesomeAsyncStorage,
    });

    return (
        <div>
            <h1>Current color scheme: {colorScheme}</h1>
            <button onClick={() => setColorScheme('light')}>Light</button>
            <button onClick={() => setColorScheme('dark')}>Dark</button>
        </div>
    );
};

If you use React Native AsyncStorage, you should serialized value (or wrapped AsyncStorage in a adapter).

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useAsyncStorage } from '@wakeup/react-use-storage';

const App: FunctionComponent = () => {
    const [value, setValue] = useAsyncStorage({
        key: 'user',
        initialValue: {
            isAuthorized: false,
        },
        storage: AsyncStorage,
    });

    const user = useMemo(() => {
        if (value === null) {
            return value;
        }

        return JSON.parse(value);
    }, [value]);

    const handleSetUser = useCallback(
        async (data) => setValue(JSON.stringify(data)),
        [setValue]
    );

    ...
};

Usage no npm install needed!