@lynx-js/lynx-ui-sortable
v3.130.0
Published
A headless Sortable list component for ReactLynx. It provides list reordering primitives via main-thread animations.
Readme
@lynx-js/lynx-ui-sortable
A headless Sortable list component for ReactLynx. It provides list reordering primitives via main-thread animations.
Installation
We strongly recommend installing and using this component through the main @lynx-js/lynx-ui package:
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui
# npm
npm install @lynx-js/lynx-ui
# yarn
yarn add @lynx-js/lynx-ui(If necessary, you can still install the standalone package via pnpm add @lynx-js/lynx-ui-sortable)
Usage
The lynx-ui-sortable follows a headless composition pattern.
Component Structure
The Sortable component is composed of the following sub-components:
<SortableRoot>
{(item) => (
<SortableItem
key={item.getSortingKey()}
sortingKey={item.getSortingKey()}
>
<SortableItemArea>
{/* Your item content */}
</SortableItemArea>
</SortableItem>
)}
</SortableRoot>SortableRoot: The root container that manages the sortable state.SortableItem: An individual sortable item.SortableItemArea: The draggable area within a sortable item.
About @lynx-js/lynx-ui
This component is part of @lynx-js/lynx-ui, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.
License
lynx-ui is Apache License 2.0 licensed.
