global-state-hook.js

import React from 'react';
import { GlobalStoreProvider, GlobalStore } from 'global-store-hook';

const App = () => {
    const init = {
        lang: 'en',
        color: 'blue'
    }

    return (
        <GlobalStoreProvider initValues={init}>
            <LanguagePicker />
            <Menu />
        </GlobalStoreProvider>
    );
}

const Menu = () => <MenuItem />;

const LanguagePicker = () => {
    const store = GlobalStore();
    return (
        <div>
            <button onClick={() => store.set('lang', 'en')}>English</button>
            <button onClick={() => store.set('lang', 'fr')}>French</button>
        </div>
    );
}

const MenuItem = () => {
    const store = GlobalStore();
    return (
        <div>
            <p>Theme colour: {store.get('color')}</p>
            <p>Locale: {store.get('lang')}</p>
        </div>
    );
}

export default App;