https://github.com/pjb0811/react-dnd-component
components using react & react-dnd
https://github.com/pjb0811/react-dnd-component
react react-dnd
Last synced: 5 months ago
JSON representation
components using react & react-dnd
- Host: GitHub
- URL: https://github.com/pjb0811/react-dnd-component
- Owner: pjb0811
- Created: 2018-09-12T07:10:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-28T09:54:50.000Z (almost 7 years ago)
- Last Synced: 2025-08-09T14:25:06.588Z (6 months ago)
- Topics: react, react-dnd
- Language: TypeScript
- Homepage:
- Size: 160 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-dnd-component
> components using react & react-dnd
[](https://www.npmjs.com/package/react-dnd-component) [](https://standardjs.com)
## Install
```bash
npm install --save react-dnd-component
```
## Usage
### List
[demo](https://codesandbox.io/s/ll724prxrq)
```tsx
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 (
{i}
);
});
};
return (
{
console.log(state);
}}
>
{item(5)}
{item(5)}
);
}
}
export default DragDropContext(HTML5Backend)(App);
```
### Native Files
[demo](https://codesandbox.io/s/6j6x9jp183)
```tsx
import React, { Component } from 'react';
import {
NativeFiles,
DragDropContext,
HTML5Backend
} from 'react-dnd-component';
class App extends Component {
render() {
return (
{({ canDrop, isOver, files, removeFiles }) => {
return (
);
}}
);
}
}
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 (
{isActive ? 'Release to drop' : 'Drag file here'}
);
}
return (
{this.list(files)}
remove files
);
}
list = files => {
return files.map(file =>
name: {file.name});
};
}
export default DragDropContext(HTML5Backend)(App);
```
## License
MIT © [pjb0811](https://github.com/pjb0811)