/react-easy-sort

A React component to sort items in lists or grids

Primary LanguageTypeScriptMIT LicenseMIT

react-easy-sort

A React component to sort items in lists or grids

version Monthly downloads gzip size MIT License PRs Welcome

react-easy-sort-demo

The goal of this component is to allow sorting elements with drag and drop.

It is mobile friendly by default. It doesn't block scrolling the page when swiping inside it: the user needs to press an item during at least 200ms to start the drag gesture.

On non-touch devices, the drag gesture only starts after moving an element by at least one pixel. This is done to avoid blocking clicks on clickable elements inside an item.

Features

  • Supports horizontal and vertical lists
  • Supports grid layouts
  • Mobile-friendly
  • IE11 support 🙈

Demo

Check out the examples:

Installation

yarn add react-easy-sort

or

npm install react-easy-sort --save

Basic usage

import SortableList, { SortableItem } from 'react-easy-sort'
import { arrayMoveImmutable } from 'array-move';

const App = () => {
  const [items, setItems] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'])

  const onSortEnd = (oldIndex: number, newIndex: number) => {
    setItems((array) => arrayMoveImmutable(array, oldIndex, newIndex))
  }

  return (
    <SortableList onSortEnd={onSortEnd} className="list" draggedItemClassName="dragged">
      {items.map((item) => (
        <SortableItem key={item}>
          <div className="item">{item}</div>
        </SortableItem>
      ))}
    </SortableList>
  )
}

Props

SortableList

Name Description Type Default
as Determines html tag for the container element keyof JSX.IntrinsicElements div
onSortEnd* Called when the user finishes a sorting gesture. (oldIndex: number, newIndex: number) => void -
draggedItemClassName Class applied to the item being dragged string -
lockAxis Determines if an axis should be locked 'x' or 'y'
allowDrag Determines whether items can be dragged boolean true
customHolderRef Ref of an element to use as a container for the dragged item React.RefObject<HTMLElement | null> document.body

SortableItem

This component doesn't take any other props than its child. This child should be a single React element that can receives a ref. If you pass a component as a child, it needs to be wrapped with React.forwardRef().

SortableKnob

You can use this component if you don't want the whole item to be draggable but only a specific area of it.

import SortableList, { SortableItem, SortableKnob } from 'react-easy-sort'
import arrayMove from 'array-move'

const App = () => {
  const [items, setItems] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'])

  const onSortEnd = (oldIndex: number, newIndex: number) => {
    setItems((array) => arrayMove(array, oldIndex, newIndex))
  }

  return (
    <SortableList onSortEnd={onSortEnd} className="list" draggedItemClassName="dragged">
      {items.map((item) => (
        <SortableItem key={item}>
          <div className="item">
            <SortableKnob>
              <div>Drag me</div>
            </SortableKnob>
            {item}
          </div>
        </SortableItem>
      ))}
    </SortableList>
  )
}

This component doesn't take any other props than its child. This child should be a single React element that can receive a ref. If you pass a component as a child, it needs to be wrapped with React.forwardRef().

Recommended CSS rules

To disable browser default behaviors that can interfer with the dragging experience, we recommend adding the following declarations on the "items":

  • user-select: none;: disable the selection of content inside the item (the blue box)
  • pointer-events: none;: required for some browsers if your items contain images (see the Interactive avatars demo)

Development

yarn
yarn start

Now, open http://localhost:3001/index.html and start hacking!

License

MIT

Maintainers

This project is maintained by Valentin Hervieu.

This project was originally part of @ricardo-ch organisation because I (Valentin) was working at Ricardo. After leaving this company, they gracefully accepted to transfer the project to me. ❤️

Alternatives