1import { createGlobalState } from "foo-state"
2
3const initialState = 0
4
5const { useGlobalState } = createGlobalState(initialState)
6
7const Counter = () => {
8  const [count, setCount] = useGlobalState()
9
10  const increment = () => {
11    setCount(count + 1)
12  }
13
14  const decrement = () => {
15    // you can also use callback functions
16    setCount((state) => {
17      if (state > 0) {
18        return state - 1
19      }
20
21      return state
22    })
23  }
24
25  return (
26    <div>
27      <button onClick={decrement}>-</button>
28      <span>{count}</span>
29      <button onClick={increment}>+</button>
30    </div>
31  )
32}

1import { createGlobalState } from "foo-state"
2
3const initialState = 0
4
5const { useGlobalState, setGlobalState } = createGlobalState(initialState)
6
7function setInitialState() {
8  setTimeout(() => {
9    setGlobalState(10_000)
10  }, 2_000)
11}
12
13const Counter = () => {
14  const [count, setCount] = useGlobalState()
15
16  useEffect(() => {
17    setInitialState()
18  }, [])
19
20  const decrement = () => {
21    setCount(count - 1)
22  }
23
24  const increment = () => {
25    setCount(count + 1)
26  }
27
28  return (
29    <div>
30      <button onClick={decrement}>-</button>
31      <span>{count}</span>
32      <button onClick={increment}>+</button>
33    </div>
34  )
35}

1import { createGlobalState } from "foo-state"
2
3const initialState = {
4    firstName: "John",
5    lastName: "Doe",
6    age: 43
7}
8
9const { createPartialState } = createGlobalState(initialState)
10
11const useAge = createPartialState(state => state.age)
12
13const Age = () => {
14    const age = useAge()
15
16    return (
17        <div>{age}</div>
18    )
19}

1import { createGlobalState } from "foo-state"
2
3const initialState = {
4    firstName: "John",
5    lastName: "Doe",
6    age: 43
7}
8
9const { useGlobalState } = createGlobalState(initialState, {
10  persistence: {
11      key: "x-storage-key",
12      // optional, defaults to localStorage
13      // localStorage or sessionStorage
14      type: "localStorage",
15  }
16})
17
18const Person = () => {
19    const [person, setPerson] = useGlobalState()
20
21    function onChange(e){
22      const {name, value} = e.target
23
24      setPerson({
25        ...person,
26        [name]: value
27      })
28    }
29
30    return (
31        <div>
32          <label>
33            First Name
34            <br />
35          <input name="firstName" value={person.firstName} onChange={onChange} />
36          </label>
37          <label>
38            Last Name
39            <br />
40          <input name="lastName" value={person.lastName} onChange={onChange} />
41          </label>
42          <label>
43            Age
44            <br />
45          <input name="age" value={person.age} onChange={onChange} />
46          </label>
47        </div>
48    )
49}

1import { createGlobalState } from "foo-state"
2
3const initialState = {
4  firstName: "John",
5  lastName: "Doe",
6  age: 43,
7}
8
9const { useGlobalState } = createGlobalState(initialState)
10
11const Profile = () => {
12  const [state, setState] = useGlobalState()
13
14  function invertNames() {
15    const newState = {
16      firstName: "Doe",
17      lastName: "John",
18      age: 43,
19    }
20    setState(newState, { deepCompare: true })
21  }
22
23  return (
24    <div>
25      <p>First Name: {state.firstName}</p>
26      <p>Last Name: {state.lastName}</p>
27      <p>Age: {state.age}</p>
28      <button onClick={invertNames}>Click me!</button>
29    </div>
30  )
31}

1function heavyCalculation() {
2  const user = {
3    name: 'John',
4    birthday: new Date('1995-03-15')
5  }
6
7  // let's pretend we're getting a correct age here
8  const age = new Date().getFullYear() - user.birthday.getFullYear()
9
10  return {
11    name: user.name,
12    age,
13  }
14}
15
16
17const {useGlobalState} = createGlobalState(heavyCalculation)
18
19const Profile = () => {
20  const [state] = useGlobalState()
21
22  return (
23    <div>
24      <p>Name: {state.name}</p>
25      <p>Age: {state.age}</p>
26    </div>
27  )
28}

1import { createGlobalState } from "foo-state"
2
3type Person = {
4  firstName: string
5  lastName: string
6  age: number
7}
8
9const { useGlobalState } = createGlobalState<Person>({
10  firstName: "John",
11  lastName: "Doe",
12  // string is not assignable to type number
13  age: "43"
14})
15
16const Profile = () => {
17    const [state, setState] = useGlobalState()
18
19    function invertNames() {
20        const newState = {
21            firstName: "Doe",
22            lastName: "John",
23            age: 43,
24        }
25        setState(newState, {deepCompare: true})
26    }
27
28    return (
29        <div>
30            <p>First Name: {state.firstName}</p>
31            <p>Last Name: {state.lastName}</p>
32            <p>Age: {state.age}</p>
33            <button onClick={invertNames}>Click me!</button>
34        </div>
35    )
36}