Skip to content

Commit

Permalink
docs: add quick-start.md for SolidJS (#48)
Browse files Browse the repository at this point in the history
Updated the SolidJS quick start which follows the example shown for React, Vue, and Angular.
  • Loading branch information
LadyBluenotes authored Feb 21, 2024
1 parent be32993 commit 7f5514c
Showing 1 changed file with 54 additions and 1 deletion.
55 changes: 54 additions & 1 deletion docs/framework/solid/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,57 @@ title: Quick Start
id: quick-start
---

# TODO
The basic Solid app example to get started with the Tanstack Solid-store.

```jsx
import { useStore, Store } from '@tanstack/solid-store';

export const store = new Store({
  cats: 0,
  dogs: 0
})

export const Display = (props) => {
  const count = useStore(store, (state) => state[props.animals]);
  return (
    <span>
      {props.animals}: {count()}
      </span>
    );
}

export const Button = (props) => {
  return (
    <button
      onClick={() => {
        store.setState((state) => {
          return {
            ...state,
            [props.animals]: state[props.animals] + 1
          }
        })
      }}
    >
      Increment
    </button>
  )
}

const App = () => {
  return (
    <div>
    <h1>How many of your friends like cats or dogs?</h1>
    <p>
      Press one of the buttons to add a counter of how many of your friends
      like cats or dogs
      </p>
      <Button animals="dogs" />
      <Display animals="dogs" />
      <Button animals="cats" />
      <Display animals="cats" />
  </div>
  );
};

export default App;
```

0 comments on commit 7f5514c

Please sign in to comment.