cobuildlab_boost_react_global_state_provider_hook_quickstart.ts

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