https://github.com/lucasbesen/react-kanban-dnd
:clipboard: Open source kanban board built with React
https://github.com/lucasbesen/react-kanban-dnd
drag-and-drop draggable hacktoberfest kanban kanban-board react
Last synced: 6 months ago
JSON representation
:clipboard: Open source kanban board built with React
- Host: GitHub
- URL: https://github.com/lucasbesen/react-kanban-dnd
- Owner: lucasbesen
- License: mit
- Archived: true
- Created: 2018-09-18T19:03:22.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-10-25T03:55:18.000Z (almost 6 years ago)
- Last Synced: 2024-04-25T09:43:47.875Z (over 1 year ago)
- Topics: drag-and-drop, draggable, hacktoberfest, kanban, kanban-board, react
- Language: TypeScript
- Homepage:
- Size: 791 KB
- Stars: 136
- Watchers: 3
- Forks: 20
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## :hammer: Install and Usage
**Live demo**: click [here](https://codesandbox.io/s/3262ywolp1)
First, you need to install **react-kanban-dnd** on your project:
```sh
yarn add react-kanban-dnd
```
Then import it inside your project:
```js
import ReactKanban from 'react-kanban-dnd';
export default class MyKanban extends React.Component {
render() {
return (
);
}
}
```
That's it. Now, kanban should appear on your project.
## :gear: Properties
| Prop | Description | Required |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| **`onDragEnd`** | Function that will be called when drag ends | false |
| **`onDragStart`** | Function that will be called when drag starts | false |
| **`renderCard`** | Function that will render your card. Receives a row as a parameter | true |
| **`columns`** | Array that will be used to render your kanban. Check the patterns [here](#pushpin--column-array-pattern) | true |
| **`columnStyle`** | Optional styling for the column | false |
| **`columnHeaderStyle`** | Optional styling for the column header | false |
| **`columnTitleStyle`** | Optional styling for the column title | false |
| **`cardWrapperStyle`** | Optional styling for the card wrapper | false |
## :pushpin: Columns array pattern
Your column array should be something like this:
```js
const columns = [
{
id: 'columnId',
title: 'Column Title',
rows: [
{
id: 'rowId',
...yourPropsHere, // Those props can be used on renderCard
},
],
},
];
```
**Note:** Both **columnId** and **rowId** should be a **string**.
## :bulb: Example
```js
import ReactKanban from 'react-kanban-dnd';
export default class MyKanban extends React.Component {
renderCard = row => (
Name:
{row.name}
Age:
{row.age}
);
render() {
const columns = [
{
id: 'column1',
title: 'Column 1',
rows: [
{
id: 'row1',
name: 'User one',
age: 21,
},
],
},
{
id: 'column2',
title: 'Column 2',
rows: [
{
id: 'row2',
name: 'User two',
age: 23,
},
{
id: 'row3',
name: 'User three',
age: 30,
},
],
},
{
id: 'column3',
title: 'Column 3',
rows: [
{
id: 'row4',
name: 'User four',
age: 25,
},
],
},
];
return (
);
}
}
```
## 🤝 Contributions
Start cloning the repository:
```sh
git@github.com:lucasbesen/react-kanban-dnd.git
```
Install dependencies:
```sh
yarn
```
Then run docz;
```sh
yarn docz:dev
```
Finally go to http://localhost:3000/docs-react-kanban
Every kind of contribution is welcome. You can ping me at [Twitter](https://twitter.com/lucasbesen) as well.
## 💪🏻 Contributors
| [
Lucas Besen](https://twitter.com/lucasbesen)
[🐛](https://github.com/lucasbesen/react-kanban-dnd/issues?q=author%3Alucasbesen "Bug reports") [💻](https://github.com/lucasbesen/react-kanban-dnd/commits?author=lucasbesen "Code") [📖](https://github.com/lucasbesen/react-kanban-dnd/commits?author=lucasbesen "Documentation") [💡](#example-lucasbesen "Examples") [👀](#review-lucasbesen "Reviewed Pull Requests") | [
Caio Flores](https://github.com/caioflores)
[💻](https://github.com/lucasbesen/react-kanban-dnd/commits?author=caioflores "Code") [📖](https://github.com/lucasbesen/react-kanban-dnd/commits?author=caioflores "Documentation") | [
Isac](https://medium.com/@isacjunior)
[💻](https://github.com/lucasbesen/react-kanban-dnd/commits?author=isacjunior "Code") | [
Nfinger](https://github.com/Nfinger)
[💻](https://github.com/lucasbesen/react-kanban-dnd/commits?author=Nfinger "Code") | [
Austin Turner](https://github.com/paustint)
[📖](https://github.com/lucasbesen/react-kanban-dnd/commits?author=paustint "Documentation") | [
Marcus Koh](http://www.kohchihao.com)
[🐛](https://github.com/lucasbesen/react-kanban-dnd/issues?q=author%3Akohchihao "Bug reports") | [
Gabriel F. Luchtenberg](https://github.com/GLuchtenberg)
[💻](https://github.com/lucasbesen/react-kanban-dnd/commits?author=GLuchtenberg "Code") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |