How to use @xstate/react - 10 common examples

//   .map(model => model.id)
    //   .map(getPoseImageFilepathById)
    //   .map(THREE.ImageBitmapLoader.load)

    characterModels
      .map(model => model.id)
      .map(getCharacterImageFilepathById)
      .map(filepath => new THREE.ImageBitmapLoader().load(filepath))

    objectModels
      .map(model => model.id)
      .map(getModelImageFilepathById)
      .map(filepath => new THREE.ImageBitmapLoader().load(filepath))
  }, [])

  const [uiCurrent, uiSend, uiService] = useMachine(
    uiMachine,
    {
      immediate: true,
      actions: {
        onTriggerStart (context, event) {
          let u = event.intersection.uv.x
          let v = event.intersection.uv.y

          let cr = getCanvasRenderer()

          let canvasIntersection = cr.getCanvasIntersection(u, v, true, showHelp)
          if (canvasIntersection) {
            let { id } = canvasIntersection

            if (canvasIntersection.type == 'button') {
              playSound('select')

const FeedbackWidget = () => {
  // We’re not going to show this widget if JS is disabled
  if (typeof window === `undefined`) {
    return null
  }

  const widgetTitle = useRef(null)
  const successTitle = useRef(null)
  const errorTitle = useRef(null)
  const toggleButton = useRef(null)
  const [current, send] = useMachine(
    feedbackMachine.withConfig({
      actions: {
        focusWidgetTitle() {
          requestAnimationFrame(() => {
            widgetTitle.current.focus()
          })
        },
        focusSuccessTitle() {
          requestAnimationFrame(() => {
            successTitle.current.focus()
          })
        },
        focusErrorTitle() {
          requestAnimationFrame(() => {
            errorTitle.current.focus()
          })

const Row = props => {

	const { item, onUpdate, onCancel } = props

	const [state, send, service] = useMachine(

		// notice how react functions are hooked into fsm as an action
		WorkerMachine.withConfig(
			{
				actions: {
					notifyProgress: (ctx, e) => {
						onUpdate(ctx)
					},
					notifyCancel: (ctx, e) => {
						onCancel(ctx)
					},
				},
			},
			item,
		),
	)

function App() {
  const [current, send] = useMachine(machine)

  const renderScreen = () => {
    switch (current.value) {
      case 'welcome':
        return  send('START_QUIZ')} />
      case 'loading':
        return 
      case 'failure':
        return (
           send('RETRY')}
            startOver={() => send('START_OVER')}
          />
        )
      case 'quiz':
        return (

export function Todos() {
  const [state, send] = useMachine(persistedTodosMachine);

  useHashChange(e => {
    send(`SHOW.${window.location.hash.slice(2) || "all"}`);
  });

  const { todos, todo } = state.context;

  const numActiveTodos = todos.filter(todo => !todo.completed).length;
  const allCompleted = todos.length > 0 && numActiveTodos === 0;
  const mark = !allCompleted ? "completed" : "active";
  const markEvent = `MARK.${mark}`;
  const filteredTodos = filterTodos(state, todos);

  return (
    <section data-state="{state.toStrings()}">
      <header></header></section>

export function Feedback({ initialState = 'question' }) {
  const [current, send] = useMachine(Feedback.machine);

  useKeyDown('Escape', () => send({ type: 'CLOSE' }));

  return ;
}

const Results = () => {
  const [current, send] = useMachine(resultsMachine)
  const { sentiments } = current.context

  if (current.matches('loading')) {
    return <div>Tabulating results...</div>
  }

  if (current.matches('failure')) {
    return (
      <div>Sorry, there was an error calculating the results. Our bad.</div>
    )
  }

  if (current.matches('success')) {
    return (
      <div>
        <div>The average score is...</div></div>

function List({
  fetchData,
  sideOfTheForce = SideOfTheForce.Light,
  selectedItem,
  onSelection
}: {
  fetchData: () => Promise<{ results: { name: string }[] }>;
  selectedItem?: any;
  sideOfTheForce?: SideOfTheForce;
  onSelection?: (selectedItem: any) => void;
}) {
  const [dataState, sendToDataMachine] = useMachine(fetchMachine, {
    services: {
      fetchData: () => {
        return fetchData().then(r => r.results);
      }
    },
    actions: {
      notifyHasData: ctx => {
        selectionState.context.selectedIndex =
          ctx.results &&
          ctx.results.findIndex(
            item => selectedItem && selectedItem.name === item.name
          );
      }
    }
  });
  useEffect(() => {

const Select = (props: Props) => {
  assert(Boolean(props.id), `Input.Select: "id" is required.`);
  assert(
    typeof props.value !== 'undefined' ? typeof props.onChange !== 'undefined' : true,
    `Input.Select: You can't use 'value' prop without onChange. It makes sense only if you want a readonly Input.Select, which is really weird. Don't do that.`,
  );

  const trackContext = React.useContext(TrackingContext);

  const isFirstRender = useIsFirstRender();

  /******      Machine instantiation      ******/
  const machineHandlers = useMachine(SelectMachine, {
    context: {
      label: props.label,
      error: props.error || '',
      success: props.success || false,
      options: props.options,
      selectedItems: [],
      disabled: props.disabled || false,
      open: false,
      itemFocusIdx: null,
      placeholder: props.placeholder || '',
      searchQuery: '',
      extraInfo: props.extraInfo || '',
      multiselect: props.multiselect || false,
      lastNavigationType: null,
      visibleOptions: props.options,
      showSearch: props.showSearch || false,

export const Wrap = () => {
	const [state, send] = useMachine(CompressMachine, { log: true })

	return (
		
			
		
	)
}