Awesome Open Source
Awesome Open Source

🔨   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

💻

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (254,312) 
Reactjs (73,042) 
Hacktoberfest (36,544) 
Drag And Drop (707) 
Kanban (298) 
Draggable (242) 
Kanban Board (154) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194