$ cnpm install react-stately
A library of React Hooks that provides cross-platform state management for your design system.
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.
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}`)}
/>
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.
Copyright 2013 - present © cnpmjs.org | Home |