Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@react-stately/selection
Advanced tools
@react-stately/selection is a library that provides state management for selection in React applications. It is part of the React Spectrum collection of libraries and is designed to handle selection logic for lists, tables, and other components that require selection functionality.
Single Selection
This feature allows you to manage single selection state in a list. The code sample demonstrates how to use the `useSingleSelectListState` hook to manage the selection state of a list of items.
import { useSingleSelectListState } from '@react-stately/selection';
function SingleSelectList(props) {
let state = useSingleSelectListState(props);
return (
<ul>
{props.items.map((item) => (
<li key={item.key} onClick={() => state.setSelectedKey(item.key)}>
{item.name} {state.selectedKey === item.key && '(Selected)'}
</li>
))}
</ul>
);
}
Multiple Selection
This feature allows you to manage multiple selection states in a list. The code sample demonstrates how to use the `useMultipleSelectionState` hook to manage the selection state of a list of items, allowing multiple items to be selected.
import { useMultipleSelectionState } from '@react-stately/selection';
function MultipleSelectList(props) {
let state = useMultipleSelectionState(props);
return (
<ul>
{props.items.map((item) => (
<li key={item.key} onClick={() => state.toggleSelection(item.key)}>
{item.name} {state.selectedKeys.has(item.key) && '(Selected)'}
</li>
))}
</ul>
);
}
Selection Management
This feature provides a selection manager to handle complex selection logic. The code sample demonstrates how to use the `useSelectionManager` hook to manage selection actions like selecting all items, clearing selection, and toggling selection for individual items.
import { useSelectionManager } from '@react-stately/selection';
function SelectionManagerExample(props) {
let manager = useSelectionManager(props.selectionState);
return (
<div>
<button onClick={() => manager.selectAll()}>Select All</button>
<button onClick={() => manager.clearSelection()}>Clear Selection</button>
<ul>
{props.items.map((item) => (
<li key={item.key} onClick={() => manager.toggleSelection(item.key)}>
{item.name} {manager.isSelected(item.key) && '(Selected)'}
</li>
))}
</ul>
</div>
);
}
react-select is a flexible and customizable library for building dropdowns and multi-select components in React. It provides a wide range of features for handling single and multiple selections, custom rendering, and more. Compared to @react-stately/selection, react-select is more focused on dropdown and select input components, while @react-stately/selection provides more general selection state management.
downshift is a library that provides primitives to build flexible and accessible autocomplete, combobox, dropdown, and menu components in React. It offers hooks and utilities to manage selection state and user interactions. Compared to @react-stately/selection, downshift is more focused on building custom input components with complex interactions, while @react-stately/selection is more focused on general selection state management.
react-multi-select-component is a simple and lightweight library for creating multi-select dropdowns in React. It provides an easy-to-use API for managing multiple selections. Compared to @react-stately/selection, react-multi-select-component is more specialized for multi-select dropdowns, while @react-stately/selection offers a broader range of selection state management capabilities.
This package is part of react-spectrum. See the repo for more details.
FAQs
Spectrum UI components in React
We found that @react-stately/selection demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.