edulan/react-virtual-kanban

A Kanban component in React

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

react-virtual-kanban's Issues

Add examples

Add code examples on how to use the component, how to handle lists state etc.

onDropRow is not called when a row item is dropped outside of a row drop target

I integrated this with firebase so im relying on onDropRow and onDropList to update their position in firebase. The position in frontend is okay and updated, but those callbacks are not called when i dropped them outside of a drop target so i cant update the firebase.

I forked and applied a quick fix in v.0.2.0 to still use it
imajean@fc6ae26

Add touch support

No drag events work with touch devices

Library with ES3/ES5 code

Library without using require.js or any module Loader. library like jquery

React 16

I can’t get this package working with React 16, are there currently any plans to add support for it?