🔨 Install and Usage
Live demo: click here
First, you need to install react-kanban-dnd on your project:
yarn add react-kanban-dnd
Then import it inside your project:
; Component { return <ReactKanban onDragEnd=thisonDragEnd onDragStart=thisonDragStart renderCard=thisrenderCard columns=columns columnStyle=stylecolumnStyle columnHeaderStyle=stylecolumnHeaderStyle columnTitleStyle=stylecolumnTitleStyle cardWrapperStyle=stylecardWrapperStyle /> ; }
That's it. Now, kanban should appear on your project.
⚙️ 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 | 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 |
📌 Columns array pattern
Your column array should be something like this:
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.
💡 Example
; Component <Wrapper> <TextWrapper> <Label>Name:</Label> <Value>rowname</Value> </TextWrapper> <TextWrapper> <Label>Age:</Label> <Value>rowage</Value> </TextWrapper> </Wrapper> ; { 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 <ReactKanban renderCard=thisrenderCard columns=columns /> ; }
🤝 Contributions
Start cloning the repository:
git@github.com:lucasbesen/react-kanban-dnd.git
Install dependencies:
yarn
Then run docz;
yarn docz:dev
Finally go to http://localhost:3000/docs-react-kanban
Every kind of contribution is welcome. You can ping me at Twitter as well.
💪🏻 Contributors
Lucas Besen 🐛 💻 📖 💡 👀 |
Caio Flores 💻 📖 |
Isac 💻 |
Nfinger 💻 |
Austin Turner 📖 |
Marcus Koh 🐛 |
Gabriel F. Luchtenberg 💻 |
---|