Streamlining UI Component Development with State Machines

What are State Machines?

A state machine is a mathematical model that represents a finite number of states and the transitions between them. It’s an ideal solution for modeling complex UI component behavior, as it allows developers to define the different states a component can be in and the events that trigger state changes.

Benefits of Using State Machines

Using state machines provides a range of benefits for UI component development, including:

• Framework Agnosticism: State machines work seamlessly with popular frameworks like React, Angular, and Vue, making it easy to integrate into existing projects.
• Unopinionated Styling: State machines don’t impose any specific styling requirements, giving developers the freedom to use their preferred CSS libraries or write custom styles.
• Incremental Adoption: State machines’ modular design allows developers to introduce them incrementally, making it easy to adopt without disrupting existing workflows.
• Accessibility Features: State machines include built-in accessibility features, such as keyboard interactions, focus management, and ARIA roles, to ensure that UI components are usable by everyone.

Using Pre-Built State Machines

Pre-built state machines for common UI components, such as menus, accordions, and dialogs, can be easily integrated into existing projects, saving developers time and effort.

import { useMachine } from '@zag-js/core';
import { menu } from '@zag-js/menu';

const [state, send] = useMachine(menu({
  id: 'y-menu',
  onSelect: (id) => console.log(`Selected item with id ${id}`),
}));

// Use the state and send functions to control the menu component

Styling

State machines’ unopinionated styling approach gives developers complete control over the appearance of their UI components. Each component part can be styled separately using CSS selectors.

/* Style the menu items */
[data-part="item"] {
  background-color: #f0f0f0;
  padding: 10px;
}

/* Style the selected menu item */
[data-part="item"][data-selected] {
  background-color: #333;
  color: #fff;
}

Adding Custom Event Handlers

Developers can add custom event handlers to specific parts of the component using the mergeProps utility function.

import { mergeProps } from '@zag-js/core';

const MyMenu = () => {
  const [state, send] = useMachine(menu({
    id: 'y-menu',
    onSelect: (id) => console.log(`Selected item with id ${id}`),
  }));

  return (
    {/* Menu component markup */}
  );
};

Building Custom State Machines

While pre-built state machines are available for common UI components, developers may need to create custom state machines for specific use cases.

import { createMachine } from '@zag-js/core';

const myMachine = createMachine({
  id: 'y-machine',
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'active',
      },
    },
    active: {
      on: {
        CLICK: 'idle',
      },
    },
  },
});

Creating a Connector Function

Once a custom state machine is defined, developers need to create a connector function that maps the machine’s state to JSX props.

import { connector } from '@zag-js/core';

const myConnector = connector(myMachine, (state, send) => ({
  // Map state and send functions to JSX props
}));

By leveraging state machines and pre-built state machines, developers can streamline their UI component development workflow and create more maintainable, scalable, and accessible user interfaces.