{"id":14965885,"url":"https://github.com/irandoust/react-trello-client","last_synced_at":"2025-06-20T22:40:42.948Z","repository":{"id":57346705,"uuid":"206795304","full_name":"Irandoust/react-trello-client","owner":"Irandoust","description":"Simple and lightweight React package to have a clean Trello client without using jQuery or any other additional libraries.","archived":false,"fork":false,"pushed_at":"2020-01-25T21:09:09.000Z","size":297,"stargazers_count":15,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-15T00:38:51.438Z","etag":null,"topics":["api-client","api-client-react","client","client-project","clientjs","easy-to-use","javascript","js","mit","mit-license","npm-package","open-source","react","react-plugin","react-trello-api","reactjs","trello","trello-api","yarn-package"],"latest_commit_sha":null,"homepage":"https://irandoust.github.io/react-trello-client/","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/Irandoust.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-06T13:03:39.000Z","updated_at":"2025-04-16T19:23:55.000Z","dependencies_parsed_at":"2022-08-25T19:41:23.530Z","dependency_job_id":null,"html_url":"https://github.com/Irandoust/react-trello-client","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/Irandoust/react-trello-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irandoust%2Freact-trello-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irandoust%2Freact-trello-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irandoust%2Freact-trello-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irandoust%2Freact-trello-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Irandoust","download_url":"https://codeload.github.com/Irandoust/react-trello-client/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irandoust%2Freact-trello-client/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261031301,"owners_count":23100013,"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":["api-client","api-client-react","client","client-project","clientjs","easy-to-use","javascript","js","mit","mit-license","npm-package","open-source","react","react-plugin","react-trello-api","reactjs","trello","trello-api","yarn-package"],"created_at":"2024-09-24T13:35:31.019Z","updated_at":"2025-06-20T22:40:37.936Z","avatar_url":"https://github.com/Irandoust.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What is React Trello Client?\nThis is a simple and lightweight React plugin to have a clean Trello client without using jQuery or any other additional libraries.\n\n[![GitHub license](https://img.shields.io/github/license/Irandoust/react-trello-client)](https://github.com/Irandoust/react-trello-client/blob/master/LICENSE) ![npm](https://img.shields.io/npm/dw/react-trello-client) ![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/Irandoust/react-trello-client) ![npm](https://img.shields.io/npm/v/react-trello-client) ![GitHub top language](https://img.shields.io/github/languages/top/Irandoust/react-trello-client) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/Irandoust/react-trello-client)\n\n## Features  🔥\n\n* Easy to use without confusion\n* Most [client.js](https://developers.trello.com/docs/clientjs) options as component props\n* Default login button with a custom text and multiple Trello button styles\n* Option to disable default button\n* Having Authorize on component load\n* Authorization box behavior control (Popup or Redirect)\n* Control over access permission scopes (Read, Write, Account information)\n* Setting expiration time available\n* Callback functions as props\n* Clean and well optimized code\n* Well documented options\n* Global Trello object to use API features\n\n## Install 💻\nSimply run the following commands depending on which package manager you are using.\n\nInstall via [NPM](https://www.npmjs.com/get-npm):\n```sh\n$ npm i react-trello-client\n```\n\nInstall via [Yarn](https://yarnpkg.com/en/docs/install):\n```sh\n$ yarn add react-trello-client\n```\n\n## CDN 🌐\n\nYou can use CDN version of the package just with a simple script tag and, also, CSS link if you want to use the default styles:\n\n**Latest version:**\n\nLatest version on **[NPM:](https://www.npmjs.com/package/react-trello-client)**\n\n```html\n\u003c!-- \nLatest published version of\nthe package JS bundle on NPM registery \n--\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/react-trello-client/bundle/react-trello-client.bundle.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- \nLatest published version of\nthe package CSS bundle styles on NPM registery \n--\u003e\n\u003clink rel=\"stylesheet\" src=\"https://cdn.jsdelivr.net/npm/react-trello-client/bundle/react-trello-client.bundle.min.css\" /\u003e\n```\n\n**Specific version:**\n\nUsing a specific version is available too:\n\n```html\n\u003c!-- \nSpecific version of the package JS bundle \non NPM registery \n--\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/react-trello-client@version/bundle/react-trello-client.bundle.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- \nSpecific version of the package CSS bundle styles \non NPM registery \n--\u003e\n\u003clink rel=\"stylesheet\" src=\"https://cdn.jsdelivr.net/npm/react-trello-client@version/bundle/react-trello-client.bundle.min.css\" /\u003e\n```\n\n## Props ⚙\n\nYou can pass available options as props to the main component. See [Usage](#usage-) or view on [Codesandbox](https://codesandbox.io/s/zealous-liskov-merlq?fontsize=14\u0026module=%2Fsrc%2Fcomponents%2FApp%2FApp.js).\n\n**Example:**\n```jsx\n\u003cTrelloClient authorizeType=\"popup\"\u003e\n```\n\n**Available options:**\n\nProp | Type | Required | Description | Example |\n---- | ---- | -------- | ----------- | ------- |\n**apiKey** | String | Yes | The API key your got from trello. Get the API key from [https://trello.com/app-key/](https://trello.com/app-key/) | `apiKey=\"19194867c53e814486de9e5636734e11\"` |\n**clientVersion** | Number | Yes | Trello API version you are using | `clientVersion={1}`\n**apiEndpoint** | String | Yes | Trello API endpoint url | `apiEndpoint=\"https://api.trello.com\"`\n**authEndpoint** | String | Yes | Trello authorization endpoint | `authEndpoint=\"https://trello.com\"`\n**intentEndpoint** | String | Yes | Trello intent endpoint | `intentEndpoint=\"https://trello.com\"`\n**authorizeName** | String | Yes | Name of your application to show on authorization poprop or page | `authorizeName=\"React Trello Login\"`\n**authorizeType** | String | No | Select how to show the authorization window. available options are `popup` and `redirect`. Default is `popup` | `authorizeType=\"popup\"`\n**authorizePersist** | Boolean | No | Allow to write token on local storage if authentication is successful. Default is `true` | `authorizePersist={true}`\n**authorizeInteractive** | Boolean | No | Set interactive mode on or off. Default is `true` | `authorizeInteractive={true}`\n**authorizeScopeRead** | Boolean | No | Get permission to read all user boards and teams. Default is `true` | `authorizeScopeRead={true}`\n**authorizeScopeWrite** | Boolean | No | Get permission to make comment for the user, create and update cards, lists, boards and teams of the user. Default is `false` | `authorizeScopeWrite={false}`\n**authorizeScopeAccount** | Boolean | No | Get permission to read user email address. Default is `false` | `authorizeScopeAccount={false}`\n**authorizeExpiration** | String | No | Set the permission expiry time. You can pass options such as `\"1hour\"`, `\"15hours\"`, `\"1day\"`, `\"30days\"` or `\"never\"` | `authorizeExpiration=\"25days\"`\n**authorizeOnSuccess** | Function | Yes | A function to call after login is succeed | `authorizeOnSuccess={() =\u003e console.log('Login successful!')}`\n**authorizeOnError** | Function | Yes | A function to call after login is failed | `authorizeOnError={() =\u003e console.log('Login error!')}`\n**autoAuthorize** | Boolean | No | Authorization window will show up right after component is loaded. Default is `false` | `autoAuthorize={false}`\n**authorizeButton** | Boolean | No | If it's `true` default login button with Trello styles will show. Default is `false` | `authorizeButton={true}`\n**buttonStyle** | String | No | Login button style. Available options are `metamorph` and `flat`. Default is `metamorph` | `buttonStyle=\"metamorph\"`\n**buttonColor** | String | No | Login button style. Available options are `green`, `grayish-blue` and `light`. Default is `green` | `buttonColor=\"grayish-blue\"`\n**buttonText** | String | No | The text to show on login button. Default is `Login with Trello` | `buttonText=\"Login with Trello\"`\n**ButtonCustomStyles** | Object | No | You can override the button default styles with a JS style object. This adds a `style` attribute to the button with the given values | `buttonCustomStyles={{ background: blue, marginLeft: '15px' }}`\n\n## Usage 🍷\nUsage of the plugin is so simple. Just import it then pass required props. Please pay attetion to required ones. View on [Codesandbox](https://codesandbox.io/s/zealous-liskov-merlq?fontsize=14\u0026module=%2Fsrc%2Fcomponents%2FApp%2FApp.js).\n\n**Example:**\n```jsx\nimport React from 'react'\nimport TrelloClient from 'react-trello-client'\n\nconst App = () =\u003e {\n    return(\n        \u003cTrelloClient\n            apiKey=\"19194867c53e814486de9e5636734e11\" // Get the API key from https://trello.com/app-key/\n            clientVersion={1} // number: {1}, {2}, {3}\n            apiEndpoint=\"https://api.trello.com\" // string: \"https://api.trello.com\"\n            authEndpoint=\"https://trello.com\" // string: \"https://trello.com\"\n            intentEndpoint=\"https://trello.com\" // string: \"https://trello.com\"\n            authorizeName=\"React Trello Client\" // string: \"React Trello Client\"\n            authorizeType=\"popup\" // string: popup | redirect\n            authorizePersist={true}\n            authorizeInteractive={true}\n            authorizeScopeRead={false} // boolean: {true} | {false}\n            authorizeScopeWrite={true} // boolean: {true} | {false}\n            authorizeScopeAccount={true} // boolean: {true} | {false}\n            authorizeExpiration=\"never\" // string: \"1hour\", \"1day\", \"30days\" | \"never\"\n            authorizeOnSuccess={() =\u003e console.log('Login successful!')} // function: {() =\u003e console.log('Login successful!')}\n            authorizeOnError={() =\u003e console.log('Login error!')} // function: {() =\u003e console.log('Login error!')}\n            autoAuthorize={false} // boolean: {true} | {false}\n            authorizeButton={true} // boolean: {true} | {false}\n            buttonStyle=\"metamorph\" // string: \"metamorph\" | \"flat\"\n            buttonColor=\"green\" // string: \"green\" | \"grayish-blue\" | \"light\"\n            buttonText=\"Login with Trello\" // string: \"Login with Trello\"\n        /\u003e\n    )\n}\n\nexport default App\n```\n\n**Note:**\n\nIf you disable the login button, its not necessary to declare button props. Even if you don't use `authorizeButton={false}` the default option `false` will be used.\n\n**Example:**\n\n```jsx\nimport React from 'react'\nimport TrelloClient from 'react-trello-client'\n\nconst App = () =\u003e {\n    return(\n        \u003cTrelloClient\n            apiKey=\"19194867c53e814486de9e5636734e11\"\n            clientVersion={1} // number: {1}, {2}, {3}\n            apiEndpoint=\"https://api.trello.com\" // string: \"https://api.trello.com\"\n            authEndpoint=\"https://trello.com\" // string: \"https://trello.com\"\n            intentEndpoint=\"https://trello.com\" // string: \"https://trello.com\"\n            authorizeName=\"Trellog\" // string: \"React Trello Client\"\n            authorizeType=\"popup\" // string: popup | redirect\n            authorizePersist={true}\n            authorizeInteractive={true}\n            authorizeScopeRead={false} // boolean: {true} | {false}\n            authorizeScopeWrite={true} // boolean: {true} | {false}\n            authorizeScopeAccount={true} // boolean: {true} | {false}\n            authorizeExpiration=\"never\" // string: \"1hour\", \"1day\", \"30days\" | \"never\"\n            authorizeOnSuccess={() =\u003e console.log('Login successful!')} // function: {() =\u003e console.log('Login successful!')}\n            authorizeOnError={() =\u003e console.log('Login error!')} // function: {() =\u003e console.log('Login error!')}\n            autoAuthorize={false} // boolean: {true} | {false}\n        /\u003e\n    )\n}\n\nexport default App\n```\n\n**Using The API:**\n\nTo use all Trello API features simply import `Trello` object as a const, then chain the desired method. For more examples on API options please read [Trello client.js API Reference](https://developers.trello.com/docs/clientjs#section-using-the-api).\n\n```jsx\nimport React from 'react'\nimport TrelloClient, { Trello } from 'react-trello-client'\n\nTrello.addCard({\n    url:'http://example.com'\n})\n```\n\n\n## License 🔐\n\nReact Trello Client is [MIT licensed](https://github.com/Irandoust/react-trello-client/blob/master/LICENSE).\n\n##","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firandoust%2Freact-trello-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Firandoust%2Freact-trello-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firandoust%2Freact-trello-client/lists"}