react-kanban-dnd

:hammer:   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.

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

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

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}
💻 | | :---: | :---: | :---: | :---: | :---: | :---: | :---: |