Neglected Pizza Money

    react-sortable-component

    1.0.0 • Public • Published

    React Sortable Component

    A simple sortable component for ReactJS.

    Installation

    npm install --save react-sortable-component

    Usage

    JS

    var {SortableItems, SortableItem} = require('react-sortable-component');
    ...
    state = {
      items: [
        {src: 'http://lorempixel.com/400/400/sports/1'},
        {src: 'http://lorempixel.com/400/400/sports/2'},
        {src: 'http://lorempixel.com/400/400/sports/3'},
        {src: 'http://lorempixel.com/400/400/sports/4'},
        {src: 'http://lorempixel.com/400/400/sports/5'},
        {src: 'http://lorempixel.com/400/400/sports/6'}
      ]
    };
     
    handleSort = (items) => {
      this.setState({
        items: items
      });
    };
     
    render() {
      let {items} = this.state;
      return (
        <Document title="Home | React sortable component" className="page-home">
          <SortableItems name="simple-sort"
            className="simple-sort-items"
            items={items}
            onSort={this.handleSort}>
            {
              items.map((item, index) => {
                return (
                  <SortableItem key={item.src}
                    draggable={index !== 3}
                    className="simple-sort-item">
                    <LazySizes className="pointer-events-none"
                      dataSrc={item.src}
                      width="126"
                      height="126"/>
                  </SortableItem>
                );
              })
            }
          </SortableItems>
        </Document>
      );
    }
     

    CSS

    Webpack:

    require('react-sortable-component/lib/sortable.css');

    Without Webpack:

    <link rel="stylesheet" type="text/css" href="path/to/react-sortable-component/lib/sortable.css">

    or apply your style:

    [draggable] {
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-user-drag: element;
    }
     
    .sortable-items {
      margin-left: -10px;
      &:before,
      &:after {
        content: " ";
        display: table;
      }
      &:after {
        clear: both;
      }
    }
     
    .sortable-item {
      height: 150px;
      width: 150px;
      padding: 10px;
      border-radius: 2px;
      float: left;
      margin-left: 10px;
      text-align: center;
      border: 1px solid #DDD;
      background-color: #fff;
      cursor: move;
      .pointer-events-none {
        pointer-events: none;
      }
    }
     
    .sortable-item-over {
      border: 1px dashed #DDD;
    }
     

    UMD

    <link rel="stylesheet" type="text/css" href="path/to/react-sortable-component/dist/react-sortable-component.css">
    <script src="path/to//react-sortable-component/dist/react-sortable-component.js"></script>
    var SortableItems = window.ReactSortableComponent.SortableItems;
    var SortableItem = window.ReactSortableComponent.SortableItem;

    Props

    SortableItems

    Name Type Required Default Description
    name string true
    rootComponentType string or ReactClass false div EX: ul
    children node true List of SortableItem
    items array false List item need sort.
    sort function false See
    onSort function(arg) false Callback when items sorted. If items prop is defined then arg is sorted items else arg is list index of sorted items.
    className string false Your custom class name.

    SortableItem

    Name Type Required Default Description
    rootComponentType string or ReactClass false div EX: li
    children node true Sortable item content.
    draggable bool false true
    className string false Your custom class name.

    Example

    View demo or example folder.

    Install

    npm i react-sortable-component

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • minhtranite
    • vn38minhtran