# react-virtual-kanban > A Kanban component in React Latest version **0.2.0** (published 2017-03-03) · MIT license · 0 weekly downloads ## Install ```sh npm install react-virtual-kanban pnpm add react-virtual-kanban yarn add react-virtual-kanban bun add react-virtual-kanban ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.0 | | Published | 2017-03-03 | | First published | 2016-12-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 9 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 35 | | Author | Eduardo Lanchares | | Maintainers | edulan | | Keywords | react, react-component, kanban, virtual-scroll | ## Links - npm: https://www.npmjs.com/package/react-virtual-kanban - Repository: https://github.com/edulan/react-virtual-kanban - Homepage: https://edulan.github.io/react-virtual-kanban/ - Issues: https://github.com/edulan/react-virtual-kanban/issues - npm.io page: https://npm.io/package/react-virtual-kanban ## Dependencies (9) - [dnd-core](https://npm.io/package/dnd-core.md) ^2.2.3 - [react-dnd](https://npm.io/package/react-dnd.md) 2.1.4 - [classnames](https://npm.io/package/classnames.md) 2.2.5 - [dom-helpers](https://npm.io/package/dom-helpers.md) ^2.4.0 - [babel-runtime](https://npm.io/package/babel-runtime.md) 6.11.6 - [react-virtualized](https://npm.io/package/react-virtualized.md) 8.8.1 - [react-addons-update](https://npm.io/package/react-addons-update.md) 15.4.1 - [react-dnd-scrollzone](https://npm.io/package/react-dnd-scrollzone.md) 3.1.0 - [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) 2.1.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.2.0 (latest) — 2017-03-03 - 0.3.0-beta.2 (beta) — 2017-03-13 - 0.3.0 — 2017-03-13 - 0.1.1 — 2017-03-01 - 0.1.0 — 2017-02-27 - 0.0.12 — 2017-02-14 - 0.0.11 — 2017-01-30 - 0.0.10 — 2017-01-17 - 0.0.9 — 2017-01-16 - 0.0.8 — 2017-01-16 - 0.0.7 — 2017-01-11 - 0.0.6 — 2017-01-10 - 0.0.5 — 2017-01-09 - 0.0.4 — 2017-01-09 - 0.0.3 — 2016-12-19 - … 2 more at https://npm.io/package/react-virtual-kanban/versions ## README # React Virtual Kanban ![NPM version](https://img.shields.io/npm/v/react-virtual-kanban.svg?style=flat) ![NPM license](https://img.shields.io/npm/l/react-virtual-kanban.svg?style=flat) ![Travis CI status](https://img.shields.io/travis/edulan/react-virtual-kanban.svg?style=flat) 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: ```shell npm install react-virtual-kanban --save ``` ## Usage ### Basic example ```javascript 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( , 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 --- _Source: https://npm.io/package/react-virtual-kanban · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._