useSyncState()

A React hook used to read and write state distributed across all clients.

import { useSyncState } from "hyperfy";

export default function Box() {
  const [blue, dispatch] = useSyncState((state) => state.blue);

  return (
    <app>
      <box
        color={blue ? "blue" : "red"}
        onPointerDown={() => dispatch("toggle")}
      />
    </app>
  );
}

const initialState = {
  blue: false,
};

export function getStore(state = initialState) {
  return {
    state,
    actions: {
      toggle(state) {
        state.blue = !state.blue;
      },
    },
  };
}