https://github.com/irandoust/react-trello-client
Simple and lightweight React package to have a clean Trello client without using jQuery or any other additional libraries.
https://github.com/irandoust/react-trello-client
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
Last synced: 9 months ago
JSON representation
Simple and lightweight React package to have a clean Trello client without using jQuery or any other additional libraries.
- Host: GitHub
- URL: https://github.com/irandoust/react-trello-client
- Owner: Irandoust
- License: mit
- Created: 2019-09-06T13:03:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-25T21:09:09.000Z (about 6 years ago)
- Last Synced: 2025-06-15T00:38:51.438Z (10 months ago)
- 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
- Language: JavaScript
- Homepage: https://irandoust.github.io/react-trello-client/
- Size: 290 KB
- Stars: 15
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# What is React Trello Client?
This is a simple and lightweight React plugin to have a clean Trello client without using jQuery or any other additional libraries.
[](https://github.com/Irandoust/react-trello-client/blob/master/LICENSE)     
## Features 🔥
* Easy to use without confusion
* Most [client.js](https://developers.trello.com/docs/clientjs) options as component props
* Default login button with a custom text and multiple Trello button styles
* Option to disable default button
* Having Authorize on component load
* Authorization box behavior control (Popup or Redirect)
* Control over access permission scopes (Read, Write, Account information)
* Setting expiration time available
* Callback functions as props
* Clean and well optimized code
* Well documented options
* Global Trello object to use API features
## Install 💻
Simply run the following commands depending on which package manager you are using.
Install via [NPM](https://www.npmjs.com/get-npm):
```sh
$ npm i react-trello-client
```
Install via [Yarn](https://yarnpkg.com/en/docs/install):
```sh
$ yarn add react-trello-client
```
## CDN 🌐
You 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:
**Latest version:**
Latest version on **[NPM:](https://www.npmjs.com/package/react-trello-client)**
```html
```
**Specific version:**
Using a specific version is available too:
```html
```
## Props ⚙
You 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&module=%2Fsrc%2Fcomponents%2FApp%2FApp.js).
**Example:**
```jsx
```
**Available options:**
Prop | Type | Required | Description | Example |
---- | ---- | -------- | ----------- | ------- |
**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"` |
**clientVersion** | Number | Yes | Trello API version you are using | `clientVersion={1}`
**apiEndpoint** | String | Yes | Trello API endpoint url | `apiEndpoint="https://api.trello.com"`
**authEndpoint** | String | Yes | Trello authorization endpoint | `authEndpoint="https://trello.com"`
**intentEndpoint** | String | Yes | Trello intent endpoint | `intentEndpoint="https://trello.com"`
**authorizeName** | String | Yes | Name of your application to show on authorization poprop or page | `authorizeName="React Trello Login"`
**authorizeType** | String | No | Select how to show the authorization window. available options are `popup` and `redirect`. Default is `popup` | `authorizeType="popup"`
**authorizePersist** | Boolean | No | Allow to write token on local storage if authentication is successful. Default is `true` | `authorizePersist={true}`
**authorizeInteractive** | Boolean | No | Set interactive mode on or off. Default is `true` | `authorizeInteractive={true}`
**authorizeScopeRead** | Boolean | No | Get permission to read all user boards and teams. Default is `true` | `authorizeScopeRead={true}`
**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}`
**authorizeScopeAccount** | Boolean | No | Get permission to read user email address. Default is `false` | `authorizeScopeAccount={false}`
**authorizeExpiration** | String | No | Set the permission expiry time. You can pass options such as `"1hour"`, `"15hours"`, `"1day"`, `"30days"` or `"never"` | `authorizeExpiration="25days"`
**authorizeOnSuccess** | Function | Yes | A function to call after login is succeed | `authorizeOnSuccess={() => console.log('Login successful!')}`
**authorizeOnError** | Function | Yes | A function to call after login is failed | `authorizeOnError={() => console.log('Login error!')}`
**autoAuthorize** | Boolean | No | Authorization window will show up right after component is loaded. Default is `false` | `autoAuthorize={false}`
**authorizeButton** | Boolean | No | If it's `true` default login button with Trello styles will show. Default is `false` | `authorizeButton={true}`
**buttonStyle** | String | No | Login button style. Available options are `metamorph` and `flat`. Default is `metamorph` | `buttonStyle="metamorph"`
**buttonColor** | String | No | Login button style. Available options are `green`, `grayish-blue` and `light`. Default is `green` | `buttonColor="grayish-blue"`
**buttonText** | String | No | The text to show on login button. Default is `Login with Trello` | `buttonText="Login with Trello"`
**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' }}`
## Usage 🍷
Usage 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&module=%2Fsrc%2Fcomponents%2FApp%2FApp.js).
**Example:**
```jsx
import React from 'react'
import TrelloClient from 'react-trello-client'
const App = () => {
return(
console.log('Login successful!')} // function: {() => console.log('Login successful!')}
authorizeOnError={() => console.log('Login error!')} // function: {() => console.log('Login error!')}
autoAuthorize={false} // boolean: {true} | {false}
authorizeButton={true} // boolean: {true} | {false}
buttonStyle="metamorph" // string: "metamorph" | "flat"
buttonColor="green" // string: "green" | "grayish-blue" | "light"
buttonText="Login with Trello" // string: "Login with Trello"
/>
)
}
export default App
```
**Note:**
If 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.
**Example:**
```jsx
import React from 'react'
import TrelloClient from 'react-trello-client'
const App = () => {
return(
console.log('Login successful!')} // function: {() => console.log('Login successful!')}
authorizeOnError={() => console.log('Login error!')} // function: {() => console.log('Login error!')}
autoAuthorize={false} // boolean: {true} | {false}
/>
)
}
export default App
```
**Using The API:**
To 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).
```jsx
import React from 'react'
import TrelloClient, { Trello } from 'react-trello-client'
Trello.addCard({
url:'http://example.com'
})
```
## License 🔐
React Trello Client is [MIT licensed](https://github.com/Irandoust/react-trello-client/blob/master/LICENSE).
##