react-dnd-container

1.2.0 • Public • Published

react-dnd-container

A React library for sortable drag-and-drop rows or columns based on react-dnd lib.

Example

https://ifanrx.github.io/react-dnd-container/

Usage

export default class App extends React.Component {
  state = {
    cards_1: [
      {
        id: 11,
        color: '#CC0033',
        text: '11',
      },
      ...
    ],
    cards_2: [
      {
        id: 21,
        color: '#006699',
        text: '21',
      },
      ...
    ],
  }
 
  itemRender(itemData, props) {
    const style = {
      border: '1px dashed gray',
      padding: '0.5rem 1.6rem',
      marginBottom: '.5rem',
      color: 'white',
      background: itemData.color,
      opacity: props.isDragging ? 0.5 : 1,
    }
    return (
      <div style={style}>{itemData.text}</div>
    )
  }
 
  render() {
    const style = {
      width: 400,
      minHeight: 100,
    }
    return (
      <div>
        <Container group='test' horizontal style={style} itemRender={this.itemRender} cards={this.state.cards_1} />
        <Container group='test' horizontal style={style} itemRender={this.itemRender} cards={this.state.cards_2} />
      </div>
    )
  }
}
 
ReactDOM.render(<App />, document.getElementById('app'))

API

<Container itemRender={this.itemRender} cards={this.state.cards} />
Property Default Type Description
cards - Array data source, each item should has a unique id field
group - String drag and drop can only effect in the same container or between containers which has the same group name
horizontal false Boolean drag type
style - Object container style
className - String container class
itemRender - Function(card, props) item render function
onChange - Function(data, type: 'move' / 'insert' / 'delete') a callback function, executed when the cards changed
disableDragAction false Boolean Whether 'drag' action is disabled
disableDropAction false Boolean Whether 'drop' action is disabled

Package Sidebar

Install

npm i react-dnd-container

Weekly Downloads

74

Version

1.2.0

License

ISC

Unpacked Size

209 kB

Total Files

10

Last publish

Collaborators

  • xunuo_ifanr
  • chenzixing
  • liuni
  • secops
  • yanjiajun
  • zzzze