lucasbesen / React Kanban Dnd

🔨   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

📌   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 💻