react-virtual-kanban

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		Number of lists to render before/after the visible part
overscanRowCount	Number		Number of row items to render before/after the visible part

TODO

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

Changelog

0.1.0

Added overscanListCount and overscanRowCount props to be able to configure the number of extra rendered items. You may use this if you want to tune up kanban performance.

Use id as key value for SortableItem and SortableList components. This avoids wierd behaviour when changing component's internal state.