react-gstore v3.3.3

React global store (react-gstore)

This library is intended for creating a global store in react

Install

npm i react-gstore

Examples

1 store

import React, { useState } from "react"
import { createContainer } from "react-gstore"
import { render } from "react-dom"
 
function useTheme(initialState = 0) {
    let [theme, setTheme] = useState(initialState)
    let dark = () => setTheme(1)
    let light = () => setTheme(0)
    let anotherTheme = () => setTheme((theme + 1) % 2)
    return { theme, dark, light, anotherTheme}
}
 
let Theme = createContainer(useTheme)
 
function MyBlock() {
    let theme = Theme.useContainer()
    return (
        <div style={{backgroundColor: theme.theme === 0 ? 'white' : '#333333'}}>
            <p>
                Hello world
            </p>
            <button onClick={theme.anotherTheme}>
                Change theme
            </button>
        </div>
    )
}
 
function App() {
    return (
        <Theme.Provider initialState={1}>
            <MyBlock />
        </Theme.Provider>
    )
}
 
render(<App />, document.getElementById("root"))

2 and more stores

import React, { useState } from "react"
import { createContainer, Provider } from "react-gstore"
import { render } from "react-dom"
 
function useTheme(initialState = 0) {
    let [theme, setTheme] = useState(initialState)
    let dark = () => setTheme(1)
    let light = () => setTheme(0)
    let anotherTheme = () => setTheme((theme + 1) % 2)
    return { theme, dark, light, anotherTheme}
}
 
function useCounter(initialState = 0) {
    let [count, setCount] = useState(initialState)
    let decrement = () => setCount(count - 1)
    let increment = () => setCount(count + 1)
    return { count, decrement, increment }
}
 
let Theme = createContainer(useTheme)
let Counter = createContainer(useCounter)
 
function MyBlock() {
    let counter = Counter.useContainer()
    let theme = Theme.useContainer()
    return (
        <div style={{backgroundColor: theme.theme === 0 ? 'white' : '#333333', color: theme.theme === 1 ? 'white' : '#333333'}}>
            <p>
                Hello world
            </p>
            <button onClick={theme.anotherTheme}>
                Change theme
            </button>
            <p>
                Counter
            </p>
            <button onClick={counter.decrement}>-</button>
                <span>{counter.count}</span>
            <button onClick={counter.increment}>+</button>
        </div>
    )
}
 
function App() {
    return (
        <Provider containers={[
            {container: Theme, initialState: 1},
            {container: Counter, initialState: 0}
        ]}>
            <MyBlock />
        </Provider>
    )
}
 
render(<App />, document.getElementById("root"))