๐Ÿ“ฆ vercel / next.js

๐Ÿ“„ Toggle.tsx ยท 16 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16"use client";
import { useMachine } from "@xstate/react";
import { toggleMachine } from "../_machines/toggle";

export default function Toggle() {
  const [state, send] = useMachine(toggleMachine);
  return (
    <div>
      <h2>
        Toggle status: <span>{state.matches("active") ? "On" : "Off"}</span>
      </h2>
      <button onClick={() => send({ type: "TOGGLE" })}>Toggle</button>
    </div>
  );
}