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.

Features 🔥

• Easy to use without confusion
• Most client.js 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:

$ npm i react-trello-client

Install via Yarn:

$ 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:

<!-- 
Latest published version of
the package JS bundle on NPM registery 
-->
<script src="https://cdn.jsdelivr.net/npm/react-trello-client/bundle/react-trello-client.bundle.min.js"></script>

<!-- 
Latest published version of
the package CSS bundle styles on NPM registery 
-->
<link rel="stylesheet" src="https://cdn.jsdelivr.net/npm/react-trello-client/bundle/react-trello-client.bundle.min.css" />

Specific version:

Using a specific version is available too:

<!-- 
Specific version of the package JS bundle 
on NPM registery 
-->
<script src="https://cdn.jsdelivr.net/npm/react-trello-client@version/bundle/react-trello-client.bundle.min.js"></script>

<!-- 
Specific version of the package CSS bundle styles 
on NPM registery 
-->
<link rel="stylesheet" src="https://cdn.jsdelivr.net/npm/react-trello-client@version/bundle/react-trello-client.bundle.min.css" />

Props ⚙

You can pass available options as props to the main component. See Usage or view on Codesandbox.

Example:

<TrelloClient authorizeType="popup">

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/ | 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.

Example:

import React from 'react'
import TrelloClient from 'react-trello-client'

const App = () => {
    return(
        <TrelloClient
            apiKey="19194867c53e814486de9e5636734e11" // Get the API key from https://trello.com/app-key/
            clientVersion={1} // number: {1}, {2}, {3}
            apiEndpoint="https://api.trello.com" // string: "https://api.trello.com"
            authEndpoint="https://trello.com" // string: "https://trello.com"
            intentEndpoint="https://trello.com" // string: "https://trello.com"
            authorizeName="React Trello Client" // string: "React Trello Client"
            authorizeType="popup" // string: popup | redirect
            authorizePersist={true}
            authorizeInteractive={true}
            authorizeScopeRead={false} // boolean: {true} | {false}
            authorizeScopeWrite={true} // boolean: {true} | {false}
            authorizeScopeAccount={true} // boolean: {true} | {false}
            authorizeExpiration="never" // string: "1hour", "1day", "30days" | "never"
            authorizeOnSuccess={() => 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:

import React from 'react'
import TrelloClient from 'react-trello-client'

const App = () => {
    return(
        <TrelloClient
            apiKey="19194867c53e814486de9e5636734e11"
            clientVersion={1} // number: {1}, {2}, {3}
            apiEndpoint="https://api.trello.com" // string: "https://api.trello.com"
            authEndpoint="https://trello.com" // string: "https://trello.com"
            intentEndpoint="https://trello.com" // string: "https://trello.com"
            authorizeName="Trellog" // string: "React Trello Client"
            authorizeType="popup" // string: popup | redirect
            authorizePersist={true}
            authorizeInteractive={true}
            authorizeScopeRead={false} // boolean: {true} | {false}
            authorizeScopeWrite={true} // boolean: {true} | {false}
            authorizeScopeAccount={true} // boolean: {true} | {false}
            authorizeExpiration="never" // string: "1hour", "1day", "30days" | "never"
            authorizeOnSuccess={() => 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.

import React from 'react'
import TrelloClient, { Trello } from 'react-trello-client'

Trello.addCard({
    url:'http://example.com'
})

License 🔐

React Trello Client is MIT licensed.