react_boost_provider_useboost_hook_global_state_quickstart.ts

1import React from 'react';
2import { BoostProvider, useBoost, createStore } from '@friendlyss/react-boost';
3
4// 1. Define your state type
5interface RootState {
6  count: number;
7}
8
9// 2. Create your initial store
10const store = createStore<RootState>({
11  count: 0,
12});
13
14// 3. Create a component that uses the boost hook
15const Counter = () => {
16  const { state, setState } = useBoost<RootState>();
17
18  const increment = () => {
19    setState((prev) => ({ ...prev, count: prev.count + 1 }));
20  };
21
22  return (
23    <div>
24      <p>Count: {state.count}</p>
25      <button onClick={increment}>Increment</button>
26    </div>
27  );
28};
29
30// 4. Wrap your application with the BoostProvider
31const App: React.FC = () => {
32  return (
33    <BoostProvider store={store}>
34      <Counter />
35    </BoostProvider>
36  );
37};
38
39export default App;