Skip to content

Instantly share code, notes, and snippets.

@nico-martin

nico-martin/App.tsx

Last active November 22, 2021 13:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nico-martin/4bd4bcbac096f250a07c230ec7a25a18 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nico-martin/4bd4bcbac096f250a07c230ec7a25a18 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nico-martin revised this gist Nov 22, 2021. 2 changed files with 34 additions and 2 deletions.
    32 changes: 32 additions & 0 deletions App.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    import React from 'react';
    import ReactDOM from 'react-dom';
    import {
    SharedStorageProvider,
    useSharedStorage,
    } from './sharedStateContext.tsx';

    const App = () => {
    const [sharedState, setSharedState] = useSharedStorage();

    return (
    <div>
    <p>Current Count: {sharedState.count}</p>
    <button
    onClick={() =>
    setSharedState({
    count: sharedState.count + 1,
    })
    }
    >
    increase
    </button>
    </div>
    );
    };

    ReactDOM.render(
    <SharedStorageProvider>
    <App />
    </SharedStorageProvider>,
    document.querySelector('#app')
    );
    4 changes: 2 additions & 2 deletions sharedStateContext.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ const Context = React.createContext<{
    setState: () => {},
    });

    export const LocalStorageProvider = ({
    export const SharedStorageProvider = ({
    children,
    storeKey = 'test',
    useSessionStorage = false,
    @@ -50,7 +50,7 @@ export const LocalStorageProvider = ({
    );
    };

    export const useLocalStorage = (): [StateI, (state: StateI) => void] => {
    export const useSharedStorage = (): [StateI, (state: StateI) => void] => {
    const { state, setState } = React.useContext(Context);
    return [state, setState];
    };
  2. nico-martin created this gist Nov 22, 2021.
    56 changes: 56 additions & 0 deletions sharedStateContext.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    import React from 'react';

    interface StateI {
    [key: string]: any;
    }

    const Context = React.createContext<{
    state: StateI;
    setState: (state: StateI) => void;
    }>({
    state: {},
    setState: () => {},
    });

    export const LocalStorageProvider = ({
    children,
    storeKey = 'test',
    useSessionStorage = false,
    }: {
    children: any;
    storeKey?: string;
    useSessionStorage?: boolean;
    }) => {
    const [store, setStore] = React.useState<StateI>({});
    const storage = useSessionStorage ? sessionStorage : localStorage;

    React.useEffect(() => {
    setStore(getStore());
    window.addEventListener('storage', (event) => {
    if (event.key === storeKey) {
    setStore(getStore());
    }
    });
    }, []);

    const getStore = (): StateI =>
    JSON.parse(storage.getItem(storeKey)) as StateI;

    const updateStore = (part: StateI) => {
    const store = getStore();
    const newStore = { ...store, ...part };
    storage.setItem(storeKey, JSON.stringify(newStore));
    setStore(newStore);
    };

    return (
    <Context.Provider value={{ state: store, setState: updateStore }}>
    {children}
    </Context.Provider>
    );
    };

    export const useLocalStorage = (): [StateI, (state: StateI) => void] => {
    const { state, setState } = React.useContext(Context);
    return [state, setState];
    };