arsh-react-trello

React Trello RTL

A fork of (https://github.com/rcdexta/react-trello), with some changes to improve the project and support rtl.

Recommend: read react-trello docs and this fork docs to fully understand how to use the package.

Getting Started

Install using npm

$ npm install --save react-trello-rtl

Usage

The Board component takes a prop called data that contains all the details related to rendering the board. A sample data json is given here to illustrate the contract:

const data = {
  lanes: [
    {
      id: 'lane1',
      title: 'Planned Tasks',
      label: '2/2',
      cards: [
        {id: 'Card1', title: 'Write Blog', description: 'Can AI make memes', label: '30 mins', draggable: false},
        {id: 'Card2', title: 'Pay Rent', description: 'Transfer via NEFT', label: '5 mins', metadata: {sha: 'be312a1'}}
      ]
    },
    {
      id: 'lane2',
      title: 'Completed',
      label: '0/0',
      cards: []
    }
  ]
}

draggable property of Card object is true by default.

The data is passed to the board component and that's it.

import React from 'react'
import Board from 'react-trello-rtl'

export default class App extends React.Component {
  render() {
    return <Board data={data} />
  }
}

Fork Changes

• Support rtl, the board direction is right to left to support other languages.
• Translation for Hebrew and Arabic.
• Pass laneId as prop to AddCardLink to be able to completely customaize this components by yourself. (It helps when trying to create this component on your own and transfer it as props to the board) Using this new change, now you can do that:

  let eventBus = undefined
  
  const setEventBus = handle => { eventBus = handle }
  
  const AddCardLink = props => {
      let { laneId } = props // now you can extract laneId from props
      const addCard = () => {
          eventBus.publish({type: 'ADD_CARD', laneId, card: {id: "M1", title: "Buy Milk", label: "15 mins", description: "Also set reminder"}})
      }
  
      return (
      <div onClick={addCard}>{props.t('Click to add card')}</div>
      );
  };
  
  const App = () => {
      return (
          <Board 
          data={...} 
          components={{AddCardLink: AddCardLink}}
          eventBusHandle={setEventBus}
          />
      );
  };