rkd

react-kanban-dnd

πŸ“‹ Open source kanban board built with React

Showing:

Popularity

Downloads/wk

109

GitHub Stars

128

Maintenance

Last Commit

3yrs ago

Contributors

6

Package

Dependencies

7

Size (min+gzip)

34.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

πŸ”¨ Β  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

PropDescriptionRequired
onDragEndFunction that will be called when drag endsfalse
onDragStartFunction that will be called when drag startsfalse
renderCardFunction that will render your card. Receives a row as a parametertrue
columnsArray that will be used to render your kanban. Check the patterns heretrue
columnStyleOptional styling for the columnfalse
columnHeaderStyleOptional styling for the column headerfalse
columnTitleStyleOptional styling for the column titlefalse
cardWrapperStyleOptional styling for the card wrapperfalse

πŸ“Œ Β  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:

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

πŸ’»

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100