react-stately

What is react-stately?

react-stately is a library that provides state management utilities for building accessible and robust React components. It is part of the React Spectrum collection of libraries developed by Adobe, which aims to provide a comprehensive set of tools for building adaptive, accessible, and robust user interfaces.

What are react-stately's main functionalities?

useListState

The useListState hook manages the state for a list of items, including selection and focus management. This example demonstrates how to initialize a list with some items and manage their state.

import { useListState } from 'react-stately';

function MyListComponent(props) {
  let state = useListState({
    initialSelectedKeys: ['item1'],
    items: [
      { key: 'item1', name: 'Item 1' },
      { key: 'item2', name: 'Item 2' },
      { key: 'item3', name: 'Item 3' }
    ]
  });

  return (
    <ul>
      {state.collection.map(item => (
        <li key={item.key}>{item.name}</li>
      ))}
    </ul>
  );
}

useToggleState

The useToggleState hook manages the state for a toggleable component, such as a checkbox or switch. This example shows how to create a button that toggles between 'Selected' and 'Not Selected' states.

import { useToggleState } from 'react-stately';

function MyToggleComponent() {
  let state = useToggleState();

  return (
    <button onClick={state.toggle}>
      {state.isSelected ? 'Selected' : 'Not Selected'}
    </button>
  );
}

useComboBoxState

The useComboBoxState hook manages the state for a combo box component, including input value and item selection. This example demonstrates how to create a combo box with a list of items.

import { useComboBoxState } from 'react-stately';

function MyComboBoxComponent(props) {
  let state = useComboBoxState({
    items: [
      { key: 'item1', name: 'Item 1' },
      { key: 'item2', name: 'Item 2' },
      { key: 'item3', name: 'Item 3' }
    ]
  });

  return (
    <div>
      <input
        value={state.inputValue}
        onChange={e => state.setInputValue(e.target.value)}
      />
      <ul>
        {state.collection.map(item => (
          <li key={item.key}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

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.

README

react-stately

A library for simple management of shared React state

Introduction

This is an evil library for state management. This is probably the worst idea that was ever created. Please don't use this without seriously reconsidering the life choices that led you here.

License

Copyright 2018 Christian Howe

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.