valtio sample

App.tsx

import React from "react";
import { proxy, useSnapshot } from "valtio";

class Store {
  public counter = 0;
  public text = "";

  get double() {
    return this.counter * 2;
  }
}

const store = proxy(new Store());

function App() {
  return (
    <div>
      <ValtioSample />
    </div>
  );
}

function ValtioSample() {
  return (
    <div className="mt-1">
      <ValtioValue />
      <ValtioText />
      <ValtioComputed />
      <ValtioButton />
      <ValtioInput />
    </div>
  );
}

function ValtioValue() {
  const value: Store = useSnapshot(store);
  return (
    <div className="p-1 m-1 outline-black">
      {value.counter}
    </div>
  );
}

function ValtioText() {
  const value: Store = useSnapshot(store);
  return (
    <div className="p-1 m-1 outline-black">
      {value.text}
    </div>
  );
}

function ValtioComputed() {
  const value: Store = useSnapshot(store);
  return (
    <div className="p-1 m-1 outline-black">
      {value.double}
    </div>
  );
}

function ValtioButton() {
  return (
    <button
      className="m-1"
      onClick={() => {
        store.counter++;
      }}
    >
      +
    </button>
  );
}

function ValtioInput() {
  return (
    <input
      className="m-1"
      onChange={(e) => {
        store.text = e.target.value;
      }}
    />
  );
}

export default App;