### Install @lumel/react-sortable-hoc Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc/v/2.0.1 Install the library using npm or yarn. ```bash npm install @lumel/react-sortable-hoc ``` ```bash yarn add @lumel/react-sortable-hoc ``` -------------------------------- ### Install @lumel/react-sortable-hoc Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc/v/2.0.2?activeTab=versions Use npm to install the package. This is the standard command for adding the library to your project. ```bash npm i @lumel/react-sortable-hoc ``` -------------------------------- ### Install @lumel/react-sortable-hoc Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc/v/2.0.1 Install version 2.0.1 of the @lumel/react-sortable-hoc package using npm. ```bash npm i @lumel/react-sortable-hoc@2.0.1 ``` -------------------------------- ### Install React Sortable HOC with yarn Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc Install the package using yarn. ```bash yarn add @lumel/react-sortable-hoc ``` -------------------------------- ### Install React Sortable HOC with npm Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc Install the package using npm. ```bash npm install @lumel/react-sortable-hoc ``` -------------------------------- ### Basic Usage of React Sortable HOC Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc Demonstrates how to set up a sortable list component in React using SortableContainer and SortableElement HOCs. Ensure you import arrayMoveImmutable for reordering. ```javascript import React, {useState} from 'react'; import {SortableContainer, SortableElement} from '@lumel/react-sortable-hoc'; import {arrayMoveImmutable} from 'array-move'; // 1. Create your Sortable Element const SortableItem = SortableElement( React.forwardRef(({value}, ref) => (
  • {value}
    • )), ); // 2. Create your Sortable Container const SortableList = SortableContainer( React.forwardRef(({items}, ref) => ( )), ); // 3. Use the components const SortableApp = () => { const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']); const onSortEnd = ({oldIndex, newIndex}) => { setItems(arrayMoveImmutable(items, oldIndex, newIndex)); }; return ; }; ``` -------------------------------- ### Monorepo Bundler Alias Configuration Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc?activeTab=code In a monorepo environment, configure your bundler (Webpack/Vite) with a resolve alias to prevent multiple instances of React from being included, which can cause compatibility errors. ```javascript resolve: { alias: { react: path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), }, } ``` -------------------------------- ### SortableContainer HOC Properties Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc/v/2.0.2?activeTab=dependents Configuration options for the SortableContainer HOC, which enables drag-and-drop sorting for a list of items. ```APIDOC ## SortableContainer HOC ### Description This HOC enhances a React component to act as a sortable container, allowing its children to be reordered via drag and drop. ### Properties #### axis (string) - **Default**: `'y'` - **Description**: Specifies the sorting direction. Can be `'x'`, `'y'`, or `'xy'`. #### lockAxis (string) - **Description**: Locks the sorting movement to a specific axis, either `'x'` or `'y'`. #### pressDelay (number) - **Default**: `0` - **Description**: The delay in milliseconds before sorting begins. A value of `200` is recommended for mobile devices. #### distance (number) - **Description**: The minimum distance in pixels the user must drag an item before sorting starts. #### useDragHandle (boolean) - **Default**: `false` - **Description**: Set to `true` if a child element wrapped with `SortableHandle` should be used as the drag handle. #### onSortStart (function) - **Description**: A callback function that is invoked when sorting begins. It receives an object with `node`, `index`, `collection`, and `isKeySorting` properties, along with the event. #### onSortEnd (function) - **Description**: A callback function that is invoked when sorting ends. It receives an object with `oldIndex`, `newIndex`, `collection`, and `isKeySorting` properties, along with the event. #### helperClass (string) - **Description**: A CSS class name to be applied to the floating helper element during the drag operation. ``` -------------------------------- ### React 19 Migration: Using forwardRef Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc?activeTab=dependents In React 19, functional components need to be wrapped in `forwardRef` to allow the HOC access to DOM elements, ensuring performance and accurate positioning. ```javascript ## Licensing & Contributions Distributed under the MIT License. Contributions are welcome for bug fixes and compatibility updates. ``` -------------------------------- ### Configure Bundler Alias for Monorepos Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc In a monorepo, configure your bundler (Webpack/Vite) with a resolve alias to prevent multiple React copies, which can cause 'older version of React' errors. ```javascript resolve: { alias: { react: path.resolve('./node_modules/react'), }, } ``` -------------------------------- ### SortableElement HOC Properties Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc/v/2.0.2?activeTab=dependents Configuration options for the SortableElement HOC, which makes individual items within a sortable list draggable. ```APIDOC ## SortableElement HOC ### Description This HOC enhances a React component to be a draggable element within a `SortableContainer`. ### Properties #### index (number) - **Required** - **Description**: The current position (index) of the item within its collection. This is crucial for the sorting mechanism. #### collection (string | number) - **Default**: `0` - **Description**: An identifier for the sorting group. Useful when managing multiple independent sortable lists on the same page. #### disabled (boolean) - **Default**: `false` - **Description**: If set to `true`, this specific item will be disabled and cannot be sorted. ``` -------------------------------- ### Functional Component with forwardRef Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc When using functional components, wrap them with React.forwardRef to ensure correct ref attachment for positioning calculations. This is crucial for React 19 compatibility. ```javascript import {SortableElement} from '@lumel/react-sortable-hoc'; // ✅ CORRECT: Wrap with forwardRef and pass the ref const SortableItem = SortableElement( React.forwardRef((props, ref) =>
  • {props.value}
    • ), ); ``` -------------------------------- ### SortableElement HOC Props Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc Props available for the SortableElement HOC, which wraps individual list items to make them sortable. ```APIDOC ## SortableElement HOC ### Description Wraps individual items within a sortable list. ### Props #### index (number) - **Required** - **Description**: The position of the item in the collection. #### collection (string | number) - **Default**: `0` - **Description**: Useful for managing multiple sortable groups in one container. #### disabled (boolean) - **Default**: `false` - **Description**: Disables sorting for this specific item. ``` -------------------------------- ### SortableElement HOC Props Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc?activeTab=code Props available for the SortableElement Higher-Order Component (HOC) to configure individual sortable items. ```APIDOC ## SortableElement HOC ### Props - **index** (number) - Required - The position of the item in the collection. - **collection** (string | number) - Default: `0` - Useful for managing multiple sortable groups in one container. - **disabled** (boolean) - Default: `false` - Disables sorting for this specific item. ``` -------------------------------- ### SortableElement HOC Props Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc?activeTab=versions Props available for the SortableElement Higher-Order Component (HOC) to configure individual sortable items. ```APIDOC ## SortableElement HOC ### Properties - **index** (number) - Required - The position of the item in the collection. - **collection** (string | number) - Default: `0` - Useful for managing multiple sortable groups in one container. - **disabled** (boolean) - Default: `false` - Disables sorting for this specific item. ``` -------------------------------- ### SortableElement HOC Props Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc/v/2.0.1 Props available for the SortableElement Higher-Order Component (HOC) to configure individual sortable items. ```APIDOC ## SortableElement HOC ### Props | Property | Type | Default | Description | |------------|-------------------|---------|-----------------------------------------------------------------------------| | **index** | `number` | - | **Required**. The position of the item in the collection. | | **collection**| `string | number` | `0` | Useful for managing multiple sortable groups in one container. | | **disabled**| `boolean` | `false` | Disables sorting for this specific item. | ``` -------------------------------- ### SortableElement HOC Props Source: https://www.npmjs.com/package/@lumel/react-sortable-hoc Props available for the SortableElement Higher-Order Component (HOC) to configure individual sortable items. ```APIDOC ## SortableElement HOC ### Properties - **index** (`number`): **Required**. The position of the item within its collection. - **collection** (`string | number`): Identifier for managing multiple sortable groups. Defaults to `0`. - **disabled** (`boolean`): Set to `true` to disable sorting for this specific item. Defaults to `false`. ``` -------------------------------- ### SortableElement HOC Props Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc?activeTab=readme Props available for the SortableElement Higher-Order Component (HOC) to configure individual sortable items. ```APIDOC ## SortableElement HOC ### Description Configures a React component to be a sortable element within a SortableContainer. ### Props #### Path Parameters - **index** (number) - Required - The position of the item in the collection. - **collection** (string | number) - Optional - Useful for managing multiple sortable groups in one container. Default: 0. - **disabled** (boolean) - Optional - Disables sorting for this specific item. Default: false. ``` -------------------------------- ### SortableContainer HOC API Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc/v/2.0.2?activeTab=code The SortableContainer HOC is used to create a sortable list or grid. It accepts various properties to customize the sorting behavior. ```APIDOC ## SortableContainer HOC ### Description This Higher-Order Component (HOC) is used to wrap a React component, making it a sortable container. It provides props to control the sorting behavior, such as axis, lockAxis, and callbacks for start and end events. ### Properties #### `axis` (string) - **Default**: `'y'` - **Description**: Specifies the sorting direction. Can be `'x'`, `'y'`, or `'xy'`. #### `lockAxis` (string) - **Default**: `undefined` - **Description**: Locks the movement to a specific axis, either `'x'` or `'y'`. #### `pressDelay` (number) - **Default**: `0` - **Description**: The delay in milliseconds before sorting begins. Recommended for mobile devices is `200`. #### `distance` (number) - **Default**: `0` - **Description**: The minimum distance in pixels the user must drag before sorting starts. #### `useDragHandle` (boolean) - **Default**: `false` - **Description**: Set to `true` if you are using `SortableHandle` to wrap a sub-element for dragging. #### `onSortStart` (function) - **Default**: `undefined` - **Description**: A callback function that is invoked when sorting starts. It receives an object with `node`, `index`, `collection`, and `isKeySorting`, along with the `event` object. #### `onSortEnd` (function) - **Default**: `undefined` - **Description**: A callback function that is invoked when sorting ends. It receives an object with `oldIndex`, `newIndex`, `collection`, and `isKeySorting`, along with the `event` object. #### `helperClass` (string) - **Default**: `undefined` - **Description**: A CSS class name to be applied to the floating helper item during dragging. ``` -------------------------------- ### Functional Component with forwardRef for React 19 Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc/v/2.0.2?activeTab=versions When using functional components with @lumel/react-sortable-hoc v2.0.0 and above, it is essential to wrap your component with React.forwardRef. This allows the library to correctly attach refs for accurate positioning calculations during sorting operations. ```javascript import {SortableElement} from '@lumel/react-sortable-hoc'; // ✅ CORRECT: Wrap with forwardRef and pass the ref const SortableItem = SortableElement( React.forwardRef((props, ref) =>
  • {props.value}
    • ) ); ``` -------------------------------- ### SortableContainer HOC Props Source: https://www.npmjs.com/package/@lumel/react-sortable-hoc Props available for the SortableContainer Higher-Order Component (HOC) to configure sorting behavior. ```APIDOC ## SortableContainer HOC ### Properties - **axis** (`string`): Sorting direction. Accepts `'x'`, `'y'`, or `'xy'`. Defaults to `'y'`. - **lockAxis** (`string`): Locks movement to a specific axis. Accepts `'x'` or `'y'`. - **pressDelay** (`number`): Delay in milliseconds before sorting begins. Recommended value for mobile is `200`. Defaults to `0`. - **distance** (`number`): The drag distance in pixels required before sorting starts. Defaults to `0`. - **useDragHandle** (`boolean`): Set to `true` if using `SortableHandle` for drag initiation. Defaults to `false`. - **onSortStart** (`function`): Callback function executed when sorting starts. Receives an object with `({node, index, collection, isKeySorting}, event)`. - **onSortEnd** (`function`): Callback function executed when sorting ends. Receives an object with `({oldIndex, newIndex, collection, isKeySorting}, event)`. - **helperClass** (`string`): CSS class name to be applied to the floating helper item during drag. ``` -------------------------------- ### SortableContainer HOC Props Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc?activeTab=versions Props available for the SortableContainer Higher-Order Component (HOC) to configure the behavior of sortable lists. ```APIDOC ## SortableContainer HOC ### Properties - **axis** (string) - Default: `'y'` - Sorting direction: `'x'`, `'y'`, or `'xy'`. - **lockAxis** (string) - Default: `null` - Lock movement to `'x'` or `'y'`. - **pressDelay** (number) - Default: `0` - Delay (ms) before sorting starts (recommended for mobile: `200`). - **distance** (number) - Default: `0` - Drag distance required (px) before sorting starts. - **useDragHandle** (boolean) - Default: `false` - Use if you're wrapping a sub-element with `SortableHandle`. - **onSortStart** (function) - Default: `null` - Callback: `({node, index, collection, isKeySorting}, event)`. - **onSortEnd** (function) - Default: `null` - Callback: `({oldIndex, newIndex, collection, isKeySorting}, event)`. - **helperClass** (string) - Default: `null` - CSS class applied to the floating helper item. ``` -------------------------------- ### SortableElement HOC API Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc/v/2.0.2?activeTab=code The SortableElement HOC is used to wrap individual items within a sortable list or grid, making them draggable. ```APIDOC ## SortableElement HOC ### Description This Higher-Order Component (HOC) is used to wrap a React component, making it a sortable element within a `SortableContainer`. It requires an `index` prop to identify its position. ### Properties #### `index` (number) - **Required**: Yes - **Description**: The position of the item within the collection. This is crucial for the sorting mechanism. #### `collection` (string | number) - **Default**: `0` - **Description**: Used to manage multiple sortable groups within a single container. Useful for organizing different sets of sortable items. #### `disabled` (boolean) - **Default**: `false` - **Description**: Setting this to `true` will disable sorting for this specific item. ``` -------------------------------- ### SortableContainer HOC Props Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc?activeTab=code Props available for the SortableContainer Higher-Order Component (HOC) to configure the behavior of the sortable list. ```APIDOC ## SortableContainer HOC ### Props - **axis** (string) - Default: `'y'` - Sorting direction: `'x'`, `'y'`, or `'xy'`. - **lockAxis** (string) - Default: `null` - Lock movement to `'x'` or `'y'`. - **pressDelay** (number) - Default: `0` - Delay (ms) before sorting starts (recommended for mobile: `200`). - **distance** (number) - Default: `0` - Drag distance required (px) before sorting starts. - **useDragHandle** (boolean) - Default: `false` - Use if you're wrapping a sub-element with `SortableHandle`. - **onSortStart** (function) - Default: `null` - Callback: `({node, index, collection, isKeySorting}, event)`. - **onSortEnd** (function) - Default: `null` - Callback: `({oldIndex, newIndex, collection, isKeySorting}, event)`. - **helperClass** (string) - Default: `null` - CSS class applied to the floating helper item. ``` -------------------------------- ### SortableContainer HOC Props Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc/v/2.0.1 Props available for the SortableContainer Higher-Order Component (HOC) to configure the behavior of the sortable list. ```APIDOC ## SortableContainer HOC ### Props | Property | Type | Default | Description | |---------------|-------------------|---------|-----------------------------------------------------------------------------| | **axis** | `string` | `'y'` | Sorting direction: `'x'`, `'y'`, or `'xy'`. | | **lockAxis** | `string` | - | Lock movement to `'x'` or `'y'`. | | **pressDelay**| `number` | `0` | Delay (ms) before sorting starts (recommended for mobile: `200`). | | **distance** | `number` | `0` | Drag distance required (px) before sorting starts. | | **useDragHandle**| `boolean` | `false` | Use if you're wrapping a sub-element with `SortableHandle`. | | **onSortStart**| `function` | - | Callback: `({node, index, collection, isKeySorting}, event)`. | | **onSortEnd** | `function` | - | Callback: `({oldIndex, newIndex, collection, isKeySorting}, event)`. | | **helperClass**| `string` | - | CSS class applied to the floating helper item. | ``` -------------------------------- ### SortableContainer HOC Props Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc?activeTab=readme Props available for the SortableContainer Higher-Order Component (HOC) to configure the behavior of the sortable list. ```APIDOC ## SortableContainer HOC ### Description Configures a React component to be a sortable container. ### Props #### Path Parameters - **axis** (string) - Optional - Sorting direction: 'x', 'y', or 'xy'. Default: 'y'. - **lockAxis** (string) - Optional - Lock movement to 'x' or 'y'. - **pressDelay** (number) - Optional - Delay (ms) before sorting starts. Recommended for mobile: 200. Default: 0. - **distance** (number) - Optional - Drag distance required (px) before sorting starts. Default: 0. - **useDragHandle** (boolean) - Optional - Use if you're wrapping a sub-element with `SortableHandle`. Default: false. - **onSortStart** (function) - Optional - Callback: `({node, index, collection, isKeySorting}, event)`. - **onSortEnd** (function) - Optional - Callback: `({oldIndex, newIndex, collection, isKeySorting}, event)`. - **helperClass** (string) - Optional - CSS class applied to the floating helper item. ``` -------------------------------- ### SortableContainer HOC Props Source: https://www.npmjs.com/package/%40lumel/react-sortable-hoc Props available for the SortableContainer HOC, which wraps your list component to make it sortable. ```APIDOC ## SortableContainer HOC ### Description Wraps a list component to enable sorting functionality. ### Props #### axis (string) - **Default**: `'y'` - **Description**: Sorting direction. Can be `'x'`, `'y'`, or `'xy'`. #### lockAxis (string) - **Description**: Locks movement to `'x'` or `'y'` axis. #### pressDelay (number) - **Default**: `0` - **Description**: Delay in milliseconds before sorting starts. Recommended `200` for mobile. #### distance (number) - **Default**: `0` - **Description**: Drag distance in pixels required before sorting starts. #### useDragHandle (boolean) - **Default**: `false` - **Description**: Use if wrapping a sub-element with `SortableHandle`. #### onSortStart (function) - **Description**: Callback function executed when sorting starts. Receives `({node, index, collection, isKeySorting}, event)`. #### onSortEnd (function) - **Description**: Callback function executed when sorting ends. Receives `({oldIndex, newIndex, collection, isKeySorting}, event)`. #### helperClass (string) - **Description**: CSS class applied to the floating helper item during drag. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.