smart_context_hooks_react_global_state_typescript_quickstart.ts

1import React from 'react';
2import { createSmartContext } from 'smart-context-hooks';
3
4// 1. Define your State type
5interface CounterState {
6  count: number;
7}
8
9// 2. Define your Actions type
10interface CounterActions {
11  increment: () => void;
12  decrement: () => void;
13}
14
15// 3. Create the context
16const [CounterProvider, useCounter] = createSmartContext<CounterState, CounterActions>(
17  // Initial State
18  { count: 0 },
19  // Actions Factory
20  (state, setState) => ({
21    increment: () => setState((prev) => ({ count: prev.count + 1 })),
22    decrement: () => setState((prev) => ({ count: prev.count - 1 })),
23  })
24);
25
26// 4. Use the Provider in your App
27export const App = () => {
28  return (
29    <CounterProvider>
30      <CounterDisplay />
31    </CounterProvider>
32  );
33};
34
35// 5. Access state and actions in components
36const CounterDisplay = () => {
37  const { count, increment, decrement } = useCounter();
38
39  return (
40    <div>
41      <h1>Count: {count}</h1>
42      <button onClick={increment}>+</button>
43      <button onClick={decrement}>-</button>
44    </div>
45  );
46};