📄 tanstack/store/latest/docs/framework/solid/examples/simple

===============================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

src
- index.tsx
- vite-env.d.ts
.gitignore
README.md
index.html
package.json
tsconfig.json
vite.config.ts

tsx

import { Store, useStore } from '@tanstack/solid-store'
import { render } from 'solid-js/web'

// You can instantiate a Store outside of Solid components too!
export const store = new Store({
  cats: 0,
  dogs: 0,
})

interface DisplayProps {
  animals: 'dogs' | 'cats'
}

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

interface ButtonProps {
  animals: 'dogs' | 'cats'
}

export const Button = (props: ButtonProps) => {
  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>
  )
}

const root = document.getElementById('root')

render(() => <App />, root!)


import { Store, useStore } from '@tanstack/solid-store'
import { render } from 'solid-js/web'

// You can instantiate a Store outside of Solid components too!
export const store = new Store({
  cats: 0,
  dogs: 0,
})

interface DisplayProps {
  animals: 'dogs' | 'cats'
}

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

interface ButtonProps {
  animals: 'dogs' | 'cats'
}

export const Button = (props: ButtonProps) => {
  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>
  )
}

const root = document.getElementById('root')

render(() => <App />, root!)

Functions / useStore

Partners Become a Partner

scarf analytics