Skip to content

Commit 7f5514c

Browse files
authoredFeb 21, 2024
docs: add quick-start.md for SolidJS (#48)
Updated the SolidJS quick start which follows the example shown for React, Vue, and Angular.
1 parent be32993 commit 7f5514c

File tree

1 file changed

+54
-1
lines changed

1 file changed

+54
-1
lines changed
 

‎docs/framework/solid/quick-start.md

+54-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,57 @@ title: Quick Start
33
id: quick-start
44
---
55

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+
```

0 commit comments

Comments
 (0)
Please sign in to comment.