react-stately

React Stately

A library of React Hooks that provides cross-platform state management for your design system.

Features

• 🏠 Foundational – React Stately provides the foundation and core logic for your component library. It handles state management for common components through an easy-to-use interface.
• 📱 Cross-platform – React Stately only provides state management, with no assumptions about the DOM or other view systems.
• ⚓️ Powered by React Hooks – React Stately is implemented as a library of React Hooks, which allows you to adapt them to your needs through composition.
• 🎨 Design agnostic – React Stately doesn’t make any assumptions about your design. It provides state management that’s intrinsic to the functionality of the component.

Getting started

The easiest way to start building a component library with React Stately is by following our getting started guide. It walks through all of the steps needed to install the hooks from npm, and create your first component.

Example

Here is a very basic example of using React Aria.

import {useRadioGroupState} from '@react-stately/radio';

function RadioGroup(props) {
  let state = useRadioGroupState(props);

  return (
    <>
      <label>
        <input
          type="radio"
          name={state.name}
          checked={state.selectedValue === 'dogs'}
          onChange={() => state.setSelectedValue('dogs')}
        />
        Dogs
      </label>
      <label>
        <input
          type="radio"
          name={state.name}
          checked={state.selectedValue === 'cats'}
          onChange={() => state.setSelectedValue('cats')}
        />
        Cats
      </label>
    </>
  );
}

<RadioGroup
  defaultValue="dogs"
  onChange={(value) => alert(`Selected ${value}`)}
/>

Learn more

React Stately is part of a family of libraries that help you build adaptive, accessible, and robust user experiences. Learn more about React Spectrum and React Aria on our website.

Similar packages

Other packages similar to react-stately

react-use

react-use is a collection of essential React hooks that cover a wide range of use cases, from state management to side effects. It provides hooks like useList, useToggle, and useInput, which offer similar functionalities to react-stately's useListState, useToggleState, and useComboBoxState, respectively. However, react-use is more general-purpose and not specifically focused on accessibility.

zustand

zustand is a small, fast, and scalable state management library for React. It provides a simple API for managing global state and can be used to create custom hooks for specific state management needs. While zustand is not specifically designed for accessibility, it offers a flexible and performant alternative to react-stately for managing component state.

react-spring

react-spring is a spring-physics-based animation library for React applications. It provides hooks for managing animated states, which can be used to create interactive and dynamic user interfaces. While react-spring is primarily focused on animations, it can complement react-stately by providing animated state transitions for components.