A React Component to Sort Items in Lists or Grids

A React Component to Sort Items in Lists or Grids

react-easy-sort A React component to sort items in lists or grids

react-easy-sort

A React component to sort items in lists or grids

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 -

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().

Development

yarn
yarn start

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

License

MIT

Alternatives

Download Details:

Author: ricardo-ch

Demo: https://codesandbox.io/s/react-easy-sort-images-demo-486qk

Source Code: https://github.com/ricardo-ch/react-easy-sort

react reactjs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What is ReactJS? | ReactJS Basics | Learn ReactJS | React for Beginners | ReactJS Training

This Edureka video on "What is ReactJS ?" will help you understand the fundamentals of ReactJS and help you in building a strong foundation in React by understanding the advantages of ReactJS along with its features and major aspects.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.