npmpackage.info

Gathering detailed insights and metrics for react-sortable-hoc

Other packages similar to react-sortable-hoc

vue-slicksort

2.0.5

Set of mixins to turn any list into a sortable, touch-friendly, animated list

@types/react-sortable-hoc

0.7.1

Stub TypeScript definitions entry for react-sortable-hoc, which provides its own types definitions

@rexxars/react-sortable-hoc

2.0.0

Set of higher-order components to turn any list into a sortable, touch-friendly, animated list

@elliemae/react-sortable-hoc

1.0.0

Set of higher-order components to turn any list into a sortable, touch-friendly, animated list

Gathering detailed insights and metrics for react-sortable-hoc

react-sortable-hoc - 2.0.0 | npmpackage.info

react-sortable-hoc

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

2.0.0

10,888

MIT

JavaScript

1.9

Installations

npm install react-sortable-hoc

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

11.11.0

NPM Version

6.7.0 Pull Requests

Open

71

Total

277

Closed

83

Merged

123

Issues

Open

220

Total

604

Closed

384

Releases

Unable to fetch releases

Languages

JavaScript

HTML

SCSS

JavaScript (85.29%)

HTML (7.82%)

SCSS (6.9%)

Developer

clauderic

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

10,888 Stars

440 Commits

979 Forks

79 Watchers

23 Branches

67 Contributors

Updated on Jul 15, 2025

Maintainers

View All 67 Contributors

Package Meta Information

Latest Version

2.0.0

Package Id

react-sortable-hoc@2.0.0

Size

248.71 kB

NPM Version

6.7.0

Node Version

11.11.0

Published on

Mar 19, 2021

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@babel/runtime invariant prop-types

Peer Dependencies

prop-types react react-dom

Dev Dependencies

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list

gzip size

Examples available here: http://clauderic.github.io/react-sortable-hoc/

Features

Higher Order Components – Integrates with your existing components
Drag handle, auto-scrolling, locked axis, events, and more!
Suuuper smooth animations – Chasing the 60FPS dream ????
Works with virtualization libraries: react-virtualized, react-tiny-virtual-list, react-infinite, etc.
Horizontal lists, vertical lists, or a grid ↔ ↕ ⤡
Touch support ????
Accessible: supports keyboard sorting

Installation

Using npm:

$ npm install react-sortable-hoc --save

Then, using a module bundler that supports either CommonJS or ES2015 modules, such as webpack:

1// Using an ES6 transpiler like Babel
2import {SortableContainer, SortableElement} from 'react-sortable-hoc';
3
4// Not using an ES6 transpiler
5var Sortable = require('react-sortable-hoc');
6var SortableContainer = Sortable.SortableContainer;
7var SortableElement = Sortable.SortableElement;

Alternatively, an UMD build is also available:

1<script src="react-sortable-hoc/dist/react-sortable-hoc.umd.js"></script>

Usage

Basic Example

1import React, {Component} from 'react';
2import {render} from 'react-dom';
3import {SortableContainer, SortableElement} from 'react-sortable-hoc';
4import arrayMove from 'array-move';
5
6const SortableItem = SortableElement(({value}) => <li>{value}</li>);
7
8const SortableList = SortableContainer(({items}) => {
9  return (
10    <ul>
11      {items.map((value, index) => (
12        <SortableItem key={`item-${value}`} index={index} value={value} />
13      ))}
14    </ul>
15  );
16});
17
18class SortableComponent extends Component {
19  state = {
20    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
21  };
22  onSortEnd = ({oldIndex, newIndex}) => {
23    this.setState(({items}) => ({
24      items: arrayMove(items, oldIndex, newIndex),
25    }));
26  };
27  render() {
28    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
29  }
30}
31
32render(<SortableComponent />, document.getElementById('root'));

That's it! React Sortable does not come with any styles by default, since it's meant to enhance your existing components.

More code examples are available here.

Why should I use this?

There are already a number of great Drag & Drop libraries out there (for instance, react-dnd is fantastic). If those libraries fit your needs, you should definitely give them a try first. However, most of those libraries rely on the HTML5 Drag & Drop API, which has some severe limitations. For instance, things rapidly become tricky if you need to support touch devices, if you need to lock dragging to an axis, or want to animate the nodes as they're being sorted. React Sortable HOC aims to provide a simple set of higher-order components to fill those gaps. If you're looking for a dead-simple, mobile-friendly way to add sortable functionality to your lists, then you're in the right place.

Prop Types

SortableContainer HOC

Property	Type	Default	Description
axis	String	`y`	Items can be sorted horizontally, vertically or in a grid. Possible values: `x`, `y` or `xy`
lockAxis	String		If you'd like, you can lock movement to an axis while sorting. This is not something that is possible with HTML5 Drag & Drop. Possible values: `x` or `y`.
helperClass	String		You can provide a class you'd like to add to the sortable helper to add some styles to it
transitionDuration	Number	`300`	The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions
keyboardSortingTransitionDuration	Number	`transitionDuration`	The duration of the transition when the helper is shifted during keyboard sorting. Set this to `0` if you'd like to disable transitions for the keyboard sorting helper. Defaults to the value set for `transitionDuration` if undefined
keyCodes	Array	`{` `lift: [32],` `drop: [32],` `cancel: [27],` `up: [38, 37],` `down: [40, 39]` `}`	An object containing an array of keycodes for each keyboard-accessible action.
pressDelay	Number	`0`	If you'd like elements to only become sortable after being pressed for a certain time, change this property. A good sensible default value for mobile is `200`. Cannot be used in conjunction with the `distance` prop.
pressThreshold	Number	`5`	Number of pixels of movement to tolerate before ignoring a press event.
distance	Number	`0`	If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the `pressDelay` prop.
shouldCancelStart	Function	Function	This function is invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select`, `option`, or `button`.
updateBeforeSortStart	Function		This function is invoked before sorting begins. It can return a promise, allowing you to run asynchronous updates (such as `setState`) before sorting begins. `function({node, index, collection, isKeySorting}, event)`
onSortStart	Function		Callback that is invoked when sorting begins. `function({node, index, collection, isKeySorting}, event)`
onSortMove	Function		Callback that is invoked during sorting as the cursor moves. `function(event)`
onSortOver	Function		Callback that is invoked when moving over an item. `function({index, oldIndex, newIndex, collection, isKeySorting}, e)`
onSortEnd	Function		Callback that is invoked when sorting ends. `function({oldIndex, newIndex, collection, isKeySorting}, e)`
useDragHandle	Boolean	`false`	If you're using the `SortableHandle` HOC, set this to `true`
useWindowAsScrollContainer	Boolean	`false`	If you want, you can set the `window` as the scrolling container
hideSortableGhost	Boolean	`true`	Whether to auto-hide the ghost element. By default, as a convenience, React Sortable List will automatically hide the element that is currently being sorted. Set this to false if you would like to apply your own styling.
lockToContainerEdges	Boolean	`false`	You can lock movement of the sortable element to it's parent `SortableContainer`
lockOffset	`OffsetValue`* \| [`OffsetValue`, `OffsetValue`]	`"50%"`	When`lockToContainerEdges`is set to`true`, this controls the offset distance between the sortable helper and the top/bottom edges of it's parent`SortableContainer`. Percentage values are relative to the height of the item currently being sorted. If you wish to specify different behaviours for locking to the top of the container vs the bottom, you may also pass in an`array`(For example:`["0%", "100%"]`).
getContainer	Function		Optional function to return the scrollable container element. This property defaults to the `SortableContainer` element itself or (if `useWindowAsScrollContainer` is true) the window. Use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as `FlexTable`). This function is passed a single parameter (the `wrappedInstance` React element) and it is expected to return a DOM element.
getHelperDimensions	Function	Function	Optional `function({node, index, collection})` that should return the computed dimensions of the SortableHelper. See default implementation for more details
helperContainer	HTMLElement \| Function	`document.body`	By default, the cloned sortable helper is appended to the document body. Use this prop to specify a different container for the sortable clone to be appended to. Accepts an `HTMLElement` or a function returning an `HTMLElement` that will be invoked before right before sorting begins
disableAutoscroll	Boolean	`false`	Disables autoscrolling while dragging

* OffsetValue can either be a finite Number or a String made up of a number and a unit (px or %). Examples: 10 (which is the same as "10px"), "50%"

SortableElement HOC

Property	Type	Default	Required?	Description
index	Number		✓	This is the element's sortableIndex within it's collection. This prop is required.
collection	Number or String	`0`		The collection the element is part of. This is useful if you have multiple groups of sortable elements within the same `SortableContainer`. Example
disabled	Boolean	`false`		Whether the element should be sortable or not

FAQ

Running Examples

In root folder, run the following commands to launch React Storybook:

$ npm install
$ npm start

Accessibility

React Sortable HOC supports keyboard sorting out of the box. To enable it, make sure your SortableElement or SortableHandle is focusable. This can be done by setting tabIndex={0} on the outermost HTML node rendered by the component you're enhancing with SortableElement or SortableHandle.

Once an item is focused/tabbed to, pressing SPACE picks it up, ArrowUp or ArrowLeft moves it one place backward in the list, ArrowDown or ArrowRight moves items one place forward in the list, pressing SPACE again drops the item in its new position. Pressing ESC before the item is dropped will cancel the sort operations.

Grid support

Need to sort items in a grid? We've got you covered! Just set the axis prop to xy. Grid support is currently limited to a setup where all the cells in the grid have the same width and height, though we're working hard to get variable width support in the near future.

Item disappearing when sorting / CSS issues

Upon sorting, react-sortable-hoc creates a clone of the element you are sorting (the sortable-helper) and appends it to the end of the <body> tag. The original element will still be in-place to preserve its position in the DOM until the end of the drag (with inline-styling to make it invisible). If the sortable-helper gets messed up from a CSS standpoint, consider that maybe your selectors to the draggable item are dependent on a parent element which isn't present anymore (again, since the sortable-helper is at the end of the <body>). This can also be a z-index issue, for example, when using react-sortable-hoc within a Bootstrap modal, you'll need to increase the z-index of the SortableHelper so it is displayed on top of the modal (see #87 for more details).

Click events being swallowed

By default, react-sortable-hoc is triggered immediately on mousedown. If you'd like to prevent this behaviour, there are a number of strategies readily available. You can use the distance prop to set a minimum distance (in pixels) to be dragged before sorting is enabled. You can also use the pressDelay prop to add a delay before sorting is enabled. Alternatively, you can also use the SortableHandle HOC.

Wrapper props not passed down to wrapped Component

All props for SortableContainer and SortableElement listed above are intentionally consumed by the wrapper component and are not passed down to the wrapped component. To make them available pass down the desired prop again with a different name. E.g.:

1const SortableItem = SortableElement(({value, sortIndex}) => (
2  <li>
3    {value} - #{sortIndex}
4  </li>
5));
6
7const SortableList = SortableContainer(({items}) => {
8  return (
9    <ul>
10      {items.map((value, index) => (
11        <SortableItem
12          key={`item-${index}`}
13          index={index}
14          sortIndex={index}
15          value={value}
16        />
17      ))}
18    </ul>
19  );
20});

Dependencies

React Sortable HOC only depends on invariant. It has the following peerDependencies: react, react-dom

Reporting Issues

If believe you've found an issue, please report it along with any relevant details to reproduce it. The easiest way to do so is to fork the react-sortable-hoc basic setup sandbox on CodeSandbox:

Asking for help

Please do not use the issue tracker for personal support requests. Instead, use Gitter or StackOverflow.

Contributions

Yes please! Feature requests / pull requests are welcome.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

121 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-3gx7-xhv7-5mx3
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx
Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv
Warn: Project is vulnerable to: GHSA-7xcx-6wjh-7xp2
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More