{"id":13403213,"url":"https://github.com/rcdexta/react-trello","last_synced_at":"2025-04-28T15:34:47.271Z","repository":{"id":16419296,"uuid":"79907773","full_name":"rcdexta/react-trello","owner":"rcdexta","description":"Pluggable components to add a kanban board to your application","archived":false,"fork":false,"pushed_at":"2024-08-06T22:00:08.000Z","size":9320,"stargazers_count":2221,"open_issues_count":153,"forks_count":486,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-03-29T08:01:46.597Z","etag":null,"topics":["js-library","kanban-board","react","reactjs-components","trello"],"latest_commit_sha":null,"homepage":"https://rcdexta.com/react-trello/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rcdexta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-24T12:02:24.000Z","updated_at":"2025-03-26T07:19:38.000Z","dependencies_parsed_at":"2024-01-13T17:58:06.432Z","dependency_job_id":"79731977-23be-4be2-931d-ece221434648","html_url":"https://github.com/rcdexta/react-trello","commit_stats":{"total_commits":440,"total_committers":51,"mean_commits":8.627450980392156,"dds":0.5295454545454545,"last_synced_commit":"29bfd1fe4e33da02e9b2a969d61dc2e61c5f5f84"},"previous_names":[],"tags_count":126,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcdexta%2Freact-trello","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcdexta%2Freact-trello/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcdexta%2Freact-trello/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcdexta%2Freact-trello/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rcdexta","download_url":"https://codeload.github.com/rcdexta/react-trello/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247919002,"owners_count":21018046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["js-library","kanban-board","react","reactjs-components","trello"],"created_at":"2024-07-30T19:01:26.892Z","updated_at":"2025-04-08T20:16:31.773Z","avatar_url":"https://github.com/rcdexta.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects","UI Components / UI Tools","Web Dev Tools"],"sub_categories":["Pluggable Components"],"readme":"# React Trello\n\nPluggable components to add a Trello (like) kanban board to your application\n\n[![Build Status](https://travis-ci.org/rcdexta/react-trello.svg?branch=master)](https://travis-ci.org/rcdexta/react-trello)\n[![yarn version](https://badge.fury.io/js/react-trello.svg)](https://badge.fury.io/js/react-trello)\n[![bundlephobia.com](https://img.shields.io/bundlephobia/minzip/react-trello.svg)](https://bundlephobia.com/result?p=react-trello)\n\n\u003e This library is not affiliated, associated, authorized, endorsed by or in any way officially connected to Trello, Inc. `Trello` is a registered trademark of Atlassian, Inc.\n\n#### Basic Demo\n[![Edit react-trello-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/1o3zj95m9j)\n\n#### Features Showcase\n[Storybook](https://rcdexta.github.io/react-trello/)\n\n## Features\n\n![alt tag](https://raw.githubusercontent.com/rcdexta/react-trello/master/react-trello.gif)\n\n* Responsive and extensible\n* Easily pluggable into existing react application\n* Supports pagination when scrolling individual lanes\n* Drag-And-Drop on cards and lanes (compatible with touch devices)\n* Edit functionality to add/delete cards\n* Custom elements to define lane and card appearance\n* Event bus for triggering events externally (e.g.: adding or removing cards based on events coming from backend)\n* Inline edit lane's title\n\n## Getting Started\n\nInstall using npm or yarn\n\n```bash\n$ npm install --save react-trello\n```\n\nor\n\n```bash\n$ yarn add react-trello\n```\n\n\n## Usage\n\nThe `Board` component takes a prop called `data` that contains all the details related to rendering the board. A sample data json is given here to illustrate the contract:\n\n```javascript\nconst data = {\n  lanes: [\n    {\n      id: 'lane1',\n      title: 'Planned Tasks',\n      label: '2/2',\n      cards: [\n        {id: 'Card1', title: 'Write Blog', description: 'Can AI make memes', label: '30 mins', draggable: false},\n        {id: 'Card2', title: 'Pay Rent', description: 'Transfer via NEFT', label: '5 mins', metadata: {sha: 'be312a1'}}\n      ]\n    },\n    {\n      id: 'lane2',\n      title: 'Completed',\n      label: '0/0',\n      cards: []\n    }\n  ]\n}\n```\n\n`draggable` property of Card object is `true` by default.\n\nThe data is passed to the board component and that's it.\n\n```jsx\nimport React from 'react'\nimport Board from 'react-trello'\n\nexport default class App extends React.Component {\n  render() {\n    return \u003cBoard data={data} /\u003e\n  }\n}\n```\n\nRefer to storybook for detailed examples: https://rcdexta.github.io/react-trello/\n\nAlso refer to the sample project that uses react-trello as illustration: https://github.com/rcdexta/react-trello-example\n\n## Use edge version of project (current master branch)\n\n```bash\n$ yarn add rcdexta/react-trello\n```\n\nand\n\n```javascript\nimport Board from 'react-trello/src'\n```\n\n## Upgrade\n\nBreaking changes. Since version 2.2 these properties are removed: `addLaneTitle`, `addCardLink`, `customLaneHeader`, `newCardTemplate`, `newLaneTemplate`, \nand `customCardLayout` with `children` element. \n\nFollow [upgrade instructions](UPGRADE.md) to make easy migration.\n\n## Properties\n\nThis is the container component that encapsulates the lanes and cards\n\n### Required parameters\n\n| Name                | Type     | Description                                                                                                                    |\n| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| data                | object   | Actual board data in the form of json                                                                                          |\n\n### Optionable flags\n\n| Name                | Type     | Description                                                                                                                    |\n| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| draggable           | boolean  | Makes all cards and lanes draggable. Default: false                                                                            |\n| laneDraggable       | boolean  | Set to false to disable lane dragging. Default: true                                                                           |\n| cardDraggable       | boolean  | Set to false to disable card dragging. Default: true                                                                           |\n| collapsibleLanes    | boolean  | Make the lanes with cards collapsible. Default: false                                                                          |\n| editable            | boolean  | Makes the entire board editable. Allow cards to be added or deleted Default: false                                             |\n| canAddLanes         | boolean  | Allows new lanes to be added to the board.                          Default: false                                             |\n| hideCardDeleteIcon  | boolean  | Disable showing the delete icon to the top right corner of the card (when board is editable)                                   |\n| editLaneTitle     | boolean  | Allow inline lane title edit                                        Default: false                                             |\n\n\n### Callbacks and handlers\n\n| Name                | Type     | Description                                                                                                                    |\n| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| handleDragStart     | function | Callback function triggered when card drag is started: `handleDragStart(cardId, laneId)`                                       |\n| handleDragEnd       | function | Callback function triggered when card drag ends, return false if you want to cancel drop: `handleDragEnd(cardId, sourceLaneId, targetLaneId, position, cardDetails)`                 |\n| handleLaneDragStart | function | Callback function triggered when lane drag is started: `handleLaneDragStart(laneId)`                                           |\n| handleLaneDragEnd   | function | Callback function triggered when lane drag ends: `handleLaneDragEnd(removedIndex, addedIndex, payload)`                                      |\n| onDataChange        | function | Called everytime the data changes due to user interaction or event bus: `onDataChange(newData)`                                |\n| onCardClick         | function | Called when a card is clicked: `onCardClick(cardId, metadata, laneId)`                                                         |\n| onCardAdd           | function | Called when a new card is added: `onCardAdd(card, laneId)`                                                                     |\n| onBeforeCardDelete  | function | Called before delete a card, please call the `callback()` if confirm to delete a card: `onConfirmCardDelete(callback)`    \n| onCardDelete        | function | Called when a card is deleted: `onCardDelete(cardId, laneId)`                                                                  |\n| onCardMoveAcrossLanes        | function | Called when a card is moved across lanes `onCardMoveAcrossLanes(fromLaneId, toLaneId, cardId, index)`                                                                  |\n| onLaneAdd           | function | Called when a new lane is added: `onLaneAdd(params)`                                                                     |\n| onLaneDelete        | function | Called when a lane is deleted `onLaneDelete(laneId)`                                                                     |\n| onLaneUpdate        | function | Called when a lane attributes are updated `onLaneUpdate(laneId, data)`                                                                     |\n| onLaneClick         | function | Called when a lane is clicked `onLaneClick(laneId)`. Card clicks are not propagated to lane click event                       |\n| onLaneScroll        | function | Called when a lane is scrolled to the end: `onLaneScroll(requestedPage, laneId)`                                               |\n\n### Other functions\n\n| Name                | Type     | Description                                                                                                                    |\n| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| eventBusHandle      | function | This is a special function that providers a publishHook to pass new events to the board. See details in Publish Events section |\n| laneSortFunction    | function | Used to specify the logic to sort cards on a lane: `laneSortFunction(card1, card2)`                                            |\n\n### I18n support\n\n| Name                | Type     | Description                                                                                                                    |\n| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| lang    | string | Language of compiled texts (\"en\", \"ru\", \"pt-br\"). Default is \"en\"                                            |\n| t       | function | Translation function. You can specify either one key as a `String`. Look into ./src/locales for keys list |\n\n### Style customization\n\n| Name                | Type     | Description                                                                                                                    |\n| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| style               | object   | Pass CSS style props to board container                                                                                        |\n| cardStyle           | object   | CSS style for every cards |\n| laneStyle           | object   | CSS style for every lanes |\n| tagStyle            | object   | If cards have tags, use this prop to modify their style                                                                        |\n| cardDragClass       | string   | CSS class to be applied to Card when being dragged                                                                             |\n| cardDropClass       | string   | CSS class to be applied to Card when being dropped                                                                             |\n| laneDragClass       | string   | CSS class to be applied to Lane when being dragged                                                                             |\n| laneDropClass       | string   | CSS class to be applied to Lane when being dropped                                                                             |\n| components          | object   | Map of customised components. [List](src/components/index.js) of available. |\n\n\n### Lane specific props\n\n| Name                | Type     | Description                                                                                                                    |\n| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| id                  | string   | ID of lane                                                                                                                     |\n| style               | object   | Pass CSS style props to lane container                                                                                         |\n| labelStyle          | object   | Pass CSS style props of label                                                                                                  |\n| cardStyle           | object   | Pass CSS style props for cards in this lane                                                                                    |\n| disallowAddingCard  | boolean  | Disallow adding card button in this lane (default: false)                                                                      |\n\n\nRefer to `stories` folder for examples on many more options for customization.\n\n## Editable Board\n\nIt is possible to make the entire board editable by setting the `editable` prop to true. This switch prop will enable existing cards to be deleted and show a `Add Card` link at the bottom of each lane, clicking which will show an inline editable new card.\n\nCheck out the [editable board story](https://rcdexta.github.io/react-trello/?selectedKind=Editable%20Board\u0026selectedStory=Add%2FDelete%20Cards\u0026full=0\u0026down=0\u0026left=1\u0026panelRight=0) and its corresponding [source code](https://github.com/rcdexta/react-trello/blob/master/stories/EditableBoard.story.js) for more details.\n\n## Styling and customization\n\nThere are three ways to apply styles to the library components including `Board`, `Lane` or `Card`:\n\n### 1. Predefined CSS classnames\n\nUse the predefined css classnames attached to these elements that go by `.react-trello-lane`, `.react-trello-card`, `.react-trello-board`:\n\n```css\n.react-trello-lane {\n  border: 0;\n  background-color: initial;\n}\n```\n\n### 2. Pass custom style attributes as part of data.\n\nThis method depends on used `Card` and `Lane` components.\n\n```javascript\nconst data = {\n  lanes: [\n    {\n      id: 'lane1',\n      title: 'Planned Tasks',\n      style: { backgroundColor: 'yellow' },  // Style of Lane\n      cardStyle: { backgroundColor: 'blue' } // Style of Card\n      ...\n};\n\n\u003cBoard \n  style={{backgroundColor: 'red'}}  // Style of BoardWrapper\n  data={data}\n  /\u003e\n```\n\nStorybook example - [stories/Styling.story.js](stories/Styling.story.js)\n\n### 3. Completely customize the look-and-feel by using components dependency injection.\n\nYou can override any of used components (ether one or completery all)\n\n```javascript\nconst components = {\n  GlobalStyle: MyGlobalStyle, // global style created with method `createGlobalStyle` of `styled-components`\n  LaneHeader: MyLaneHeader,\n  Card: MyCard,\n  AddCardLink: MyAddCardLink,\n  ...\n};\n\n\u003cBoard components={components} /\u003e\n```\n\nTotal list of customizable components: [src/components/index.js ](src/components/index.js)\n\nRefer to [components definitions](src/components) to discover their properties list and types.\n\nRefer more examples in storybook.\n\n## Publish Events\n\nWhen defining the board, it is possible to obtain a event hook to the component to publish new events later after the board has been rendered. Refer the example below:\n\n```javascript\nlet eventBus = undefined\n\nconst setEventBus = (handle) =\u003e {\n  eventBus = handle\n}\n//To add a card\neventBus.publish({type: 'ADD_CARD', laneId: 'COMPLETED', card: {id: \"M1\", title: \"Buy Milk\", label: \"15 mins\", description: \"Also set reminder\"}})\n\n//To update a card\neventBus.publish({type: 'UPDATE_CARD', laneId: 'COMPLETED', card: {id: \"M1\", title: \"Buy Milk (Updated)\", label: \"20 mins\", description: \"Also set reminder (Updated)\"}})\n\n//To remove a card\neventBus.publish({type: 'REMOVE_CARD', laneId: 'PLANNED', cardId: \"M1\"})\n\n//To move a card from one lane to another. index specifies the position to move the card to in the target lane\neventBus.publish({type: 'MOVE_CARD', fromLaneId: 'PLANNED', toLaneId: 'WIP', cardId: 'Plan3', index: 0})\n\n//To update the lanes\neventBus.publish({type: 'UPDATE_LANES', lanes: newLaneData})\n\n\u003cBoard data={data} eventBusHandle={setEventBus}/\u003e\n```\n\nThe first event in the above example will move the card `Buy Milk` from the planned lane to completed lane. We expect that this library can be wired to a backend push api that can alter the state of the board in realtime.\n\n## I18n and text translations\n\n### Custom text translation function\n\nPass translation function to provide custom or localized texts:\n\n```javascript\n\n// If your translation table is flat\n//\n// For example: { 'placeholder.title': 'some text' }\nconst customTranslation = (key) =\u003e TRANSLATION_TABLE[key]\n\n// If your translation table has nested hashes (provided translations table is it)\n//\n// For example: { 'placeholder': { 'title': 'some text' } }\nimport { createTranslate } from 'react-trello'\nconst customTranslation = createTranslate(TRANSLATION_TABLE)\n\n\u003cBoard t={customTranslation} .../\u003e\n```\n\nList of available keys - [locales/en/translation.json](https://github.com/rcdexta/react-trello/blob/master/locales/en/translation.json)\n\n\n### react-i18next example\n\n```javascript\nimport { withTranslation } from 'react-i18next';\n\nconst I18nBoard = withTranslation()(Board) \n```\n\n## Compatible Browsers\n\nTested to work with following browsers using [Browserling](https://www.browserling.com/):\n\n* Chrome 60 or above\n* Firefox 52 or above\n* Opera 51 or above\n* Safari 4.0 or above\n* Microsoft Edge 15 or above\n\n## Logging\n\nPass environment variable `REDUX_LOGGING` as true to enable Redux logging in any environment\n\n## Development\n\n```\ncd react-trello/\nyarn install\nyarn run storybook\n```\n\n### Scripts\n\n1.  `yarn run lint` : Lint all js files\n2.  `yarn run lintfix` : fix linting errors of all js files\n3.  `yarn run semantic-release` : make a release. Leave it for CI to do.\n4.  `yarn run storybook`: Start developing by using storybook\n5.  `yarn run test` : Run tests. tests file should be written as `*.test.js` and using ES2015\n6.  `yarn run test:watch` : Watch tests while writing\n7.  `yarn run test:cover` : Show coverage report of your tests\n8.  `yarn run test:report` : Report test coverage to codecov.io. Leave this for CI\n9.  `yarn run build`: transpile all ES6 component files into ES5(commonjs) and put it in `dist` directory\n10. `yarn run docs`: create static build of storybook in `docs` directory that can be used for github pages\n\nLearn how to write stories [here](https://storybook.js.org/basics/writing-stories/)\n\n### Maintainers\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"https://avatars1.githubusercontent.com/u/900028?s=460\u0026v=4\" width=\"100px;\" alt=\"\"/\u003e\n\u003cbr /\u003e\u003csub\u003e\u003cb\u003ercdexta\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003c/td\u003e\n\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"https://avatars1.githubusercontent.com/u/31139?s=460\u0026v=4\" width=\"100px;\" alt=\"\"/\u003e\n\u003cbr /\u003e\u003csub\u003e\u003cb\u003edapi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003c/td\u003e\n\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcdexta%2Freact-trello","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frcdexta%2Freact-trello","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcdexta%2Freact-trello/lists"}