lucasbesen/react-kanban-dnd

:clipboard: Open source kanban board built with React

🔨   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:

import ReactKanban from 'react-kanban-dnd';

export default class MyKanban extends React.Component {
  render() {
    return (
      <ReactKanban
        onDragEnd={this.onDragEnd}
        onDragStart={this.onDragStart}
        renderCard={this.renderCard}
        columns={columns}
        columnStyle={style.columnStyle}
        columnHeaderStyle={style.columnHeaderStyle}
        columnTitleStyle={style.columnTitleStyle}
        cardWrapperStyle={style.cardWrapperStyle}
      />
    );
  }
}

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

import ReactKanban from 'react-kanban-dnd';

export default class MyKanban extends React.Component {
  renderCard = row => (
    <Wrapper>
      <TextWrapper>
        <Label>Name:</Label>
        <Value>{row.name}</Value>
      </TextWrapper>
      <TextWrapper>
        <Label>Age:</Label>
        <Value>{row.age}</Value>
      </TextWrapper>
    </Wrapper>
  );

  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 (
      <ReactKanban
        renderCard={this.renderCard}
        columns={columns}
      />
    );
  }
}

🤝   Contributions

Start cloning the repository:

[email protected]: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 💻

react-kanban-dnd's Issues

Kanban for resource scheduling (time as a vertical access)

Any tips & level of difficulty getting this Kanban to be a scheduling board where:

1. The vertical access is time for each task
2. The cards have height proportional to the time the individual task takes
3. The columns will be for resources (in our case repair stations)

React Native Support

Can this library be used in a react native?

Expected behavior on drag cards

When we drag a card over another, must reposition themselves:

Expected behavior below:

Move to TypeScript

• Code
• Lints

Move to Lerna

I'm planning a roadmap and Lerna will be very useful.

We can begin with: #5

Error: Invariant failed: Cannot get draggable ref from drag handle

Can't resolve 'idx' in InnerList.js

Hi,
I am looking to try out this library. However, when i try to set it up, it shows me this warning.

./node_modules/react-kanban-dnd/lib/InnerList.js
Module not found: Can't resolve 'idx' in '/node_modules/react-kanban-dnd/lib'

Add examples with docz

We need some code examples showing react-kanban-dnd running. Docz will be a nice alternative to fix it.

Can't resolve 'styled-components'

Having this error occur trying to use your package. Otherwise,

it looks great!

Allow drag n drop columns

Currently, we can only move the rows (cards).

How can I disable drag in drop?

Hi! I would like to lock drag in drop for some users in my project, is there a way to do it for all colunms and cards too?