File tree 1 file changed +54
-1
lines changed
1 file changed +54
-1
lines changed Original file line number Diff line number Diff line change @@ -3,4 +3,57 @@ title: Quick Start
3
3
id : quick-start
4
4
---
5
5
6
- # TODO
6
+ The basic Solid app example to get started with the Tanstack Solid-store.
7
+
8
+ ``` jsx
9
+ import { useStore , Store } from ' @tanstack/solid-store' ;
10
+
11
+ export const store = new Store ({
12
+ cats: 0 ,
13
+ dogs: 0
14
+ })
15
+
16
+ export const Display = (props ) => {
17
+ const count = useStore (store, (state ) => state[props .animals ]);
18
+ return (
19
+ < span>
20
+ {props .animals }: {count ()}
21
+ < / span>
22
+ );
23
+ }
24
+
25
+ export const Button = (props ) => {
26
+ return (
27
+ < button
28
+ onClick= {() => {
29
+ store .setState ((state ) => {
30
+ return {
31
+ ... state,
32
+ [props .animals ]: state[props .animals ] + 1
33
+ }
34
+ })
35
+ }}
36
+ >
37
+ Increment
38
+ < / button>
39
+ )
40
+ }
41
+
42
+ const App = () => {
43
+ return (
44
+ < div>
45
+ < h1> How many of your friends like cats or dogs? < / h1>
46
+ < p>
47
+ Press one of the buttons to add a counter of how many of your friends
48
+ like cats or dogs
49
+ < / p>
50
+ < Button animals= " dogs" / >
51
+ < Display animals= " dogs" / >
52
+ < Button animals= " cats" / >
53
+ < Display animals= " cats" / >
54
+ < / div>
55
+ );
56
+ };
57
+
58
+ export default App ;
59
+ ` ` `
You can’t perform that action at this time.
0 commit comments