Skip to content

Simple and lightweight React package to have a clean Trello client without using jQuery or any other additional libraries.

License

Notifications You must be signed in to change notification settings

Irandoust/react-trello-client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

45 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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.

GitHub license npm GitHub release (latest SemVer) npm GitHub top language GitHub code size in bytes

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.