@treelab/new-react-virtual-kanban
Fully virtualized React Kanban component. Heavily based on react-virtual-kanban by Eduardo Lanchares <eduardo@elanchares.com>.
Last updated a year ago by derekchan916 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @treelab/new-react-virtual-kanban 
SYNC missed versions from official npm registry.

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
laneComponent Function List List decorator component
cardComponent Function Item Item decorator component
cardDraggingComponent Function ItemPreview Item preview decorator component
laneDraggingComponent Function List preview decorator component
onMoveCard Function Move row callback
onMoveLane Function Move list callback
onDropCard Function Drop row callback
onDropLane 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

Current Tags

  • 1.5.2                                ...           latest (a year ago)

18 Versions

  • 1.5.2                                ...           a year ago
  • 1.5.1                                ...           a year ago
  • 1.5.0                                ...           a year ago
  • 1.4.1                                ...           a year ago
  • 1.4.0                                ...           a year ago
  • 1.3.1                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.16                                ...           a year ago
  • 1.1.15                                ...           a year ago
  • 1.1.14                                ...           a year ago
  • 1.1.13                                ...           a year ago
  • 1.1.12                                ...           a year ago
  • 1.1.11                                ...           a year ago
  • 1.1.10                                ...           a year ago
  • 1.1.9                                ...           a year ago
  • 1.1.8                                ...           a year ago
  • 1.0.8                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 4
Last Day 0
Last Week 4
Last Month 2
Dependencies (11)
Dev Dependencies (17)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |