React-dnd-component NPM

react-dnd-component

components using react & react-dnd

Install

npm install --save react-dnd-component

Usage

List

demo

import React, { Component } from 'react';
import { List, DragDropContext, HTML5Backend } from 'react-dnd-component';

class App extends Component {
  render() {
    const style = {
      display: 'flex',
      justifyContent: 'space-around',
      paddingTop: '20px',
      flexWrap: 'wrap'
    };

    const itemStyle = {
      width: 200,
      height: 200,
      display: 'inline-flex',
      justifyContent: 'center',
      alignItems: 'center',
      color: 'white',
      fontSize: 20
    };

    const item = length => {
      return Array.from({ length }, (x, i) => {
        return (
          <div key={i} style={{ ...itemStyle, background: 'green' }}>
            {i}
          </div>
        );
      });
    };

    return (
      <div style={{ ...style }}>
        <List
          name={'test1'}
          id={1}
          width={200}
          height={200}
          rows={3}
          style={{
            background: 'yellow',
            margin: 10
          }}
          activeStyle={{
            background: 'red'
          }}
          onChange={state => {
            console.log(state);
          }}
        >
          {item(5)}
        </List>

        <List
          name={'test1'}
          id={2}
          width={200}
          height={200}
          rows={3}
          style={{
            background: 'orange',
            margin: 10
          }}
          activeStyle={{
            background: 'blue'
          }}
        >
          {item(5)}
        </List>
      </div>
    );
  }
}

export default DragDropContext(HTML5Backend)(App);

Native Files

demo

import React, { Component } from 'react';
import {
  NativeFiles,
  DragDropContext,
  HTML5Backend
} from 'react-dnd-component';

class App extends Component {
  render() {
    return (
      <NativeFiles>
        {({ canDrop, isOver, files, removeFiles }) => {
          return (
            <FileList
              canDrop={canDrop}
              isOver={isOver}
              files={files}
              removeFiles={removeFiles}
            />
          );
        }}
      </NativeFiles>
    );
  }
}

const style = {
  width: 200,
  height: 200,
  border: '1px solid'
};

class FileList extends React.Component {
  render() {
    const { files, canDrop, isOver, removeFiles } = this.props;
    const isActive = canDrop && isOver;

    if (files.length === 0) {
      return (
        <div style={style}>
          <div>{isActive ? 'Release to drop' : 'Drag file here'}</div>
        </div>
      );
    }

    return (
      <div style={style}>
        {this.list(files)}
        <button onClick={removeFiles}>remove files</button>
      </div>
    );
  }

  list = files => {
    return files.map(file => <div key={file.name}>name: {file.name}</div>);
  };
}

export default DragDropContext(HTML5Backend)(App);