{"id":13403213,"url":"https://github.com/rcdexta/react-trello","last_synced_at":"2026-10-19T08:47:07.825Z","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":2263,"open_issues_count":156,"forks_count":491,"subscribers_count":37,"default_branch":"master","last_synced_at":"2026-10-13T07:55:42.356Z","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":"2026-10-13T00:09:36.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,"purl":"pkg:github/rcdexta/react-trello","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","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcdexta%2Freact-trello/sbom","scorecard":{"id":764445,"data":{"date":"2025-08-11","repo":{"name":"github.com/rcdexta/react-trello","commit":"29bfd1fe4e33da02e9b2a969d61dc2e61c5f5f84"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.5,"checks":[{"name":"Code-Review","score":6,"reason":"Found 9/14 approved changesets -- score normalized to 6","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 25 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"161 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-3gx7-xhv7-5mx3","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-jcpv-g9rr-qxrc","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx","Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-545q-3fg6-48m7","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-4r62-v4vq-hr96","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-c497-v8pv-ch6x","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-px4h-xg32-q955","Warn: Project is vulnerable to: GHSA-jmqm-f2gx-4fjv","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4","Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653","Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj","Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67","Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w","Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2","Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9","Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w","Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg","Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96","Warn: Project is vulnerable to: GHSA-3949-f494-cm99","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-7xfp-9c55-5vqj","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7","Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T00:22:22.135Z","repository_id":16419296,"created_at":"2025-08-23T00:22:22.135Z","updated_at":"2025-08-23T00:22:22.135Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344872684,"owners_count":38352851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-19T02:00:06.414Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2026-10-19T08:47:07.473Z","avatar_url":"https://github.com/rcdexta.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Web Dev Tools","📦 Legacy \u0026 Inactive Projects","UI Components / UI 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"}