lucas besen

react-kanban-dnd

react-kanban-dnd is a library that implements a kanban board (click here if you don’t know what it is) and it helps you to organize any kind of things in your project.

React Kanban idea came from a project inside Entria. We needed something like GitHub Projects and we didn’t find any project customizable enough.

I created it over the react-beautiful-dnd, huge thanks to you guys for providing that awesome DnD lib.

One of the most things I learned with this project is if you’ve done something cool in your company, talk to your teammates and make it open source. You will be helping the community, improving and polishing the code for your company.

react-kanban-dnd-example.gif

Install and Usage

First, you need to install react-kanban-dnd on your project

yarn add react-kanban-dnd

Now, we’re good to go:

import * as React from 'react';
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}
      />
    );
  }
}

Get started

You can find react-kanban-dnd and its docs here. Every kind of contribution is very welcome: issues, pull requests, feature requests. You can ping me at Twitter as well.

Future

Our roadmap is under development, but we have some items already:

  • Move to TypeScript
  • Move to Lerna
  • Add docz to show examples

Beside thats, react-kanban-dnd was developed to work with GraphQL. So, one of the next steps is the possibility of Relay Modern integration.

We have some open issues and as we’re on Hacktoberfest days, you can contribute and take a chance to earn an awesome T-Shirt.

I hope you enjoy it. Any feedback, just ping me or open an issue.