Skip to content

Commit 631c248

Browse files
rcdextarcdexta
authored
Updated readme for latest dnd changes
1 parent 0eaa8f1 commit 631c248

1 file changed

Lines changed: 42 additions & 29 deletions

File tree

‎README.md‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
11
# react-trello
22

3-
Pluggable components to add a trello like kanban board to your application
3+
Pluggable components to add a trello-like kanban board to your application
44

55
[![Build Status](https://travis-ci.org/rcdexta/react-trello.svg?branch=master)](https://travis-ci.org/rcdexta/react-trello)
66
[![npm version](https://badge.fury.io/js/react-trello.svg)](https://badge.fury.io/js/react-trello)
77

8+
[Demo]( https://rcdexta.github.io/react-trello/)
9+
810
## Features
911

10-
![alt tag](https://github.com/rcdexta/react-trello/raw/master/react-trello.gif)
12+
![alt tag](https://raw.githubusercontent.com/rcdexta/react-trello/master/react-trello.gif)
1113

1214
* responsive and extensible
1315
* easily pluggable into existing application
1416
* supports pagination when scrolling individual lanes
15-
* drag-and-drop within and across lanes (compatible with touch devices)
17+
* drag-and-drop cards and lanes (compatible with touch devices)
1618
* event bus for triggering events externally (e.g.: adding or removing cards based on events coming from backend)
1719
* edit functionality to add/delete cards
20+
* Parameterised templates to customize lane and card appearance
1821

1922
## Getting Started
2023

24+
Install using npm or yarn
25+
26+
```bash
27+
$ npm install --save react-trello
2128
```
22-
npm install --save react-trello
29+
30+
or
31+
32+
```bash
33+
$ yarn add react-trello
2334
```
2435

2536
## Usage
@@ -48,7 +59,7 @@ const data = {
4859
}
4960
```
5061

51-
The data is fed to the board component and that's it.
62+
The data is passed to the board component and that's it.
5263

5364
```jsx
5465
import React from 'react'
@@ -63,37 +74,39 @@ export default class App extends React.Component {
6374

6475
Refer to storybook for detailed examples: https://rcdexta.github.io/react-trello/
6576

66-
Also please refer to this sample project that uses react-trello for usage: https://github.com/rcdexta/react-trello-example
77+
Also refer to the sample project that uses react-trello as illustration: https://github.com/rcdexta/react-trello-example
6778

6879
## Documentation
6980

7081
### Board
7182

7283
This is the container component that encapsulates the lanes and cards
7384

74-
| Name | Type | Description |
75-
| --------------------- | -------- | ---------------------------------------- |
76-
| draggable | boolean | Makes all cards in the lanes draggable. Default: false |
77-
| collapsibleLanes | boolean | Make the lanes with cards collapsible. Default: false |
78-
| editable | boolean | Makes the entire board editable. Allow cards to be added or deleted Default: false |
79-
| handleDragStart | function | Callback function triggered when card drag is started: `handleDragStart(cardId, laneId)` |
80-
| handleDragEnd | function | Callback function triggered when card drag ends: `handleDragEnd(cardId, sourceLaneId, targetLaneId, position)` |
81-
| onLaneScroll | function | Called when a lane is scrolled to the end: `onLaneScroll(requestedPage, laneId)` |
82-
| onCardClick | function | Called when a card is clicked: `onCardClick(cardId, metadata, laneId) ` |
83-
| onCardAdd | function | Called when a new card is added: `onCardAdd(card, laneId) ` |
84-
| addCardLink | node | Pass custom element to replace the `Add Card` link at the end of the lane (when board is editable) |
85-
| newCardTemplate | node | Pass a custom new card template to add new cards to a lane (when board is editable) |
86-
| hideCardDeleteIcon | boolean | Disable showing the delete icon to the top right corner of the card (when board is editable) |
87-
| onCardDelete | function | Called when a card is deleted: `onCardDelete(cardId, laneId) ` |
88-
| onLaneClick | function | Called when a lane is clicked: `onLaneClick(laneId) `. Card clicks are not propagated to lane click event |
89-
| laneSortFunction | function | Used to specify the logic to sort cards on a lane: `laneSortFunction(card1, card2)` |
90-
| eventBusHandle | function | This is a special function that providers a publishHook to pass new events to the board. See details in Publish Events section |
91-
| onDataChange | function | Called everytime the data changes due to user interaction or event bus: `onDataChange(newData)` |
92-
| style | object | Pass css style props to board container |
93-
| customCardLayout | function | Boolean to indicate a custom card template will be specified. Add the card component as child to Board |
94-
| customLaneHeader | element | Pass custom lane header as react component to modify appearance |
95-
| data | object | Actual board data in the form of json |
96-
| tagStyle | object | If cards have tags, use this prop to modify their style |
85+
| Name | Type | Description |
86+
| ------------------- | -------- | ------------------------------------------------------------ |
87+
| draggable | boolean | Makes all cards in the lanes draggable. Default: false |
88+
| collapsibleLanes | boolean | Make the lanes with cards collapsible. Default: false |
89+
| editable | boolean | Makes the entire board editable. Allow cards to be added or deleted Default: false |
90+
| handleDragStart | function | Callback function triggered when card drag is started: `handleDragStart(cardId, laneId)` |
91+
| handleDragEnd | function | Callback function triggered when card drag ends: `handleDragEnd(cardId, sourceLaneId, targetLaneId, position)` |
92+
| handleLaneDragStart | function | Callback function triggered when lane drag is started: `handleLaneDragStart(laneId)` |
93+
| handleLaneDragEnd | function | Callback function triggered when lane drag ends: `handleLaneDragEnd(laneId, newPosition)` |
94+
| onLaneScroll | function | Called when a lane is scrolled to the end: `onLaneScroll(requestedPage, laneId)` |
95+
| onCardClick | function | Called when a card is clicked: `onCardClick(cardId, metadata, laneId) ` |
96+
| onCardAdd | function | Called when a new card is added: `onCardAdd(card, laneId) ` |
97+
| addCardLink | node | Pass custom element to replace the `Add Card` link at the end of the lane (when board is editable) |
98+
| newCardTemplate | node | Pass a custom new card template to add new cards to a lane (when board is editable) |
99+
| hideCardDeleteIcon | boolean | Disable showing the delete icon to the top right corner of the card (when board is editable) |
100+
| onCardDelete | function | Called when a card is deleted: `onCardDelete(cardId, laneId) ` |
101+
| onLaneClick | function | Called when a lane is clicked: `onLaneClick(laneId) `. Card clicks are not propagated to lane click event |
102+
| laneSortFunction | function | Used to specify the logic to sort cards on a lane: `laneSortFunction(card1, card2)` |
103+
| eventBusHandle | function | This is a special function that providers a publishHook to pass new events to the board. See details in Publish Events section |
104+
| onDataChange | function | Called everytime the data changes due to user interaction or event bus: `onDataChange(newData)` |
105+
| style | object | Pass css style props to board container |
106+
| customCardLayout | function | Boolean to indicate a custom card template will be specified. Add the card component as child to Board |
107+
| customLaneHeader | element | Pass custom lane header as react component to modify appearance |
108+
| data | object | Actual board data in the form of json |
109+
| tagStyle | object | If cards have tags, use this prop to modify their style |
97110

98111
Refer to `stories` folder for examples on many more options for customization.
99112

0 commit comments

Comments
 (0)