React Virtual Kanban

A Kanban component in React.

Demo available here: https://edulan.github.io/react-virtual-kanban/

Features

• Fully virtualized
• Built-in drag and drop support
• Dynamic heights
• Custom Item and List components

Installation

Via npm:

npm install react-virtual-kanban --save

Usage

Basic example

import React from 'react';
import ReactDOM from 'react-dom';
import { VirtualKanban } from 'react-virtual-kanban';

// Import only once
import 'react-virtual-kanban/lib/styles.css';

// Declare lists with the following structure
const lists = [
  {
    id: 'list#1',
    rows: [
      {id: 'item#1'},
      {id: 'item#2'},
      {id: 'item#3'},
      {id: 'item#4'}
    ]
  },
  {
    id: 'list#2',
    rows: [
      {id: 'item#5'},
      {id: 'item#6'},
      {id: 'item#7'},
      {id: 'item#8'}
    ]
  },
  {
    id: 'list#3',
    rows: [
      {id: 'item#9'},
      {id: 'item#10'},
      {id: 'item#11'},
      {id: 'item#12'}
    ]
  }
];

ReactDOM.render(
  <VirtualKanban
    lists={lists}
    width={800}
    height={600}
    listWidth={200}
  />,
  document.getElementById('root')
);

API

| Property | Type | Default | Description | |:---------------------------|:------------------|:-----------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | lists | Array | [] | Array of lists to be rendered | | width | Number | | The width of the kanban board | | height | Number | | The height of the kanban board | | listWidth | Number | | Width of each list | | listComponent | Function | List | List decorator component | | itemComponent | Function | Item | Item decorator component | | itemPreviewComponent | Function | ItemPreview | Item preview decorator component | | listPreviewComponent | Function | | List preview decorator component | | onMoveRow | Function | | Move row callback | | onMoveList | Function | | Move list callback | | onDropRow | Function | | Drop row callback | | onDropList | Function | | Drop list callback | | overscanListCount | Number | 2 | Number of lists to render before/after the visible part | | overscanRowCount | Number | 2 | Number of row items to render before/after the visible part | | itemCacheKey | Function | id | Key generator function for caching Item components |

TODO

• Auto scrolling
• Performance++
• Doc and examples
• Integration with state managers (Redux, Mobx...)
• Animations