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

react-drag-list

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-drag-list

drag list ui component for react

  • 1.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

react-drag-list


React DraggableList Component

NPM version build status Test coverage gemnasium deps npm download

Development

npm install typings -g
npm install
typings install
npm start

Example

http://localhost:8000/examples/

online example: http://front-ender.me/react-drag-list/

install

react-drag-list

Usage

import React from 'react'
import ReactDragList from 'react-drag-list'

React.render(
  <ReactDragList
    dataSource={['row1', 'row2', 'row3']}
    row={(record, index) => <div>index + record</div>}
  />, container);

API

props

NameTypeDefaultDescription
prefixClsstringrc-draggable-listThe draggable list dom node's prefixCls
classNamestringadditional className for draggable list
styleobjectRoot style for draggable list element. Such as width, height
rowClassNamestringadditional className for draggable list row item
dataSourceany[]data record array to be rendered
rowKeystringkey of row to be rendered
rowfunction(record, index): ReactNoderow data to be rendered
disabledbooleanfalsedisables the drag if set to true
handlesbooleanfalseshow drag handles
animationstring150ms, animation speed moving items when sorting, 0 — without animation
onUpdatefunction(event: Object)called when sorting list changed
ghostClassstringadditional className for the drop placeholder
chosenClassstringadditional className for the chosen item
dragClassstringadditional className for the dragging item

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

react-drag-list is released under the MIT license.

Keywords

FAQs

Package last updated on 07 May 2018

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