React-virtual-kanban NPM

React Virtual Kanban

NPM version NPM license Travis CI status

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