react-trello-client v1.1.6

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:

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.