@zag-js/core

What is @zag-js/core?

@zag-js/core is a state management library designed to help developers build complex, interactive user interfaces with ease. It provides a set of tools to manage state machines and statecharts, making it easier to handle UI states and transitions in a predictable and maintainable way.

What are @zag-js/core's main functionalities?

State Machines

This feature allows you to define state machines with states and transitions. The example demonstrates a simple toggle machine with two states: 'inactive' and 'active'.

const { createMachine } = require('@zag-js/core');

const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
});

console.log(toggleMachine.initialState.value); // 'inactive'

Statecharts

Statecharts extend state machines by adding hierarchical states and parallel states. The example shows a traffic light statechart with three states: 'green', 'yellow', and 'red'.

const { createMachine } = require('@zag-js/core');

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      on: { TIMER: 'yellow' }
    },
    yellow: {
      on: { TIMER: 'red' }
    },
    red: {
      on: { TIMER: 'green' }
    }
  }
});

console.log(lightMachine.initialState.value); // 'green'

Contextual State

This feature allows you to manage contextual state within your state machines. The example demonstrates a counter machine with an initial count of 0 and actions to increment and decrement the count.

const { createMachine } = require('@zag-js/core');

const counterMachine = createMachine({
  id: 'counter',
  initial: 'active',
  context: { count: 0 },
  states: {
    active: {
      on: {
        INCREMENT: { actions: 'increment' },
        DECREMENT: { actions: 'decrement' }
      }
    }
  }
}, {
  actions: {
    increment: (context) => context.count++,
    decrement: (context) => context.count--
  }
});

console.log(counterMachine.initialState.context.count); // 0

Other packages similar to @zag-js/core

xstate

XState is a popular library for managing state machines and statecharts in JavaScript. It offers a rich set of features for defining and interpreting state machines, and it integrates well with various frameworks like React, Vue, and Angular. Compared to @zag-js/core, XState has a larger community and more extensive documentation.

robot3

Robot3 is a lightweight state machine library for JavaScript. It focuses on simplicity and ease of use, making it a good choice for smaller projects or developers who prefer a minimalistic approach. While it may not have as many features as @zag-js/core, it provides a straightforward API for managing state machines.

redux

Redux is a widely-used state management library for JavaScript applications, particularly in the React ecosystem. While it is not specifically designed for state machines, it can be used to manage complex state logic through middleware and reducers. Compared to @zag-js/core, Redux offers a more general-purpose approach to state management.

README

The README file is missing