Nefariously Programmed Mecha

    react-easy-sort
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    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 device, 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 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">{item}</div>
            </SortableItem>
          ))}
        </SortableList>
      )
    }

    Props

    SortableList

    Name Description Type Default
    onSortEnd* Called when the user finishes a sorting gesture. (oldIndex: number, newIndex: number) => void -
    draggedItemClassName Class applied to the item being dragged string -
    allowDrag Determines whether items can be dragged boolean true

    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 doesn't want to 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 receives 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 than 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

    Alternatives

    Install

    npm i react-easy-sort

    DownloadsWeekly Downloads

    428

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    245 kB

    Total Files

    41

    Last publish

    Collaborators

    • avatar