Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More โ†’
Socket
Sign inDemoInstall
Socket

react-sortable-hoc

Package Overview
Dependencies
Maintainers
1
Versions
74
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-sortable-hoc

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

  • 2.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
507K
decreased by-0.24%
Maintainers
1
Weekly downloads
ย 
Created

What is react-sortable-hoc?

The react-sortable-hoc package is a set of higher-order components to turn any list into an animated, touch-friendly, sortable list. It is highly customizable and provides a simple API to create sortable lists with React.

What are react-sortable-hoc's main functionalities?

Sortable List

This feature allows you to create a sortable list where items can be dragged and dropped to reorder them. The SortableContainer and SortableElement higher-order components are used to wrap the list and list items, respectively.

import React from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';

const SortableItem = SortableElement(({ value }) => <li>{value}</li>);

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
  };

  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

export default SortableComponent;

Drag Handle

This feature allows you to add a drag handle to each item in the list, making it possible to drag items only by the handle. The SortableHandle higher-order component is used to create the handle.

import React from 'react';
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
import arrayMove from 'array-move';

const DragHandle = SortableHandle(() => <span>::</span>);

const SortableItem = SortableElement(({ value }) => (
  <li>
    <DragHandle />
    {value}
  </li>
));

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
  };

  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} useDragHandle />;
  }
}

export default SortableComponent;

Grid Layout

This feature allows you to create a sortable grid layout where items can be dragged and dropped to reorder them in both horizontal and vertical directions. The axis prop is set to 'xy' to enable this functionality.

import React from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';

const SortableItem = SortableElement(({ value }) => <div className="grid-item">{value}</div>);

const SortableGrid = SortableContainer(({ items }) => {
  return (
    <div className="grid">
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </div>
  );
});

class SortableComponent extends React.Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
  };

  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

  render() {
    return <SortableGrid items={this.state.items} onSortEnd={this.onSortEnd} axis="xy" />;
  }
}

export default SortableComponent;

Other packages similar to react-sortable-hoc

Keywords

FAQs

Package last updated on 19 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc