@lourenci/react-kanban

Yet another Kanban/Trello board like lib for React.

❓ Why?

• 👊 Reliable: 100% tested on CI; 100% coverage; 100% SemVer.
• 🎮 Having fun: Play with Hooks 🎣 and Styled Components 💅🏻.

🛠 Install and usage

Install the lib and the dependency on your project:

yarn add @lourenci/react-kanban styled-components

Import the lib and use it on your project:

import Board from '@lourenci/react-kanban'

const board = {
  lanes: [
    {
      id: 1,
      title: 'Backlog',
      cards: [
        {
          id: 1,
          title: 'Add card',
          description: 'Add capability to add a card in a lane'
        },
      ]
    }
    {
      id: 2,
      title: 'Doing',
      cards: [
        {
          id: 2,
          title: 'Drag-n-drop support',
          description: 'Move a card between the lanes'
        },
      ]
    }
  ]
}

<Board
  onCardDragEnd={() => {}}
>
  {board}
</Board>

🔥 API

⚙️ Props

Prop	Description
children (required)	The board to render
onCardDragEnd	Callback that will be called when the card move ends

children

const board = {
  lanes: {
    id: ${laneId},
    cards: {
      id: ${cardId},
      title: ${cardTitle},
      description: ${cardDescription}
    }
  }
}

OnCardDragEnd

When the user moves a card, this callback will be called passing these parameters:

Arg	Description
board	The modified board
source	An object with the card source { laneId, index }
destination	An object with the card destination { laneId, index }

Source and destination

Prop	Description
laneId	In source: lane source id; In destination: lane destination id;
index	In source: card's index in lane source's array; In destination: card's index in lane destination's array;

🤝 Contributing

PRs are welcome. Just fork this project, setup it:

$ yarn
$ yarn start

and open the PR.

Guidelines for contributing

• You need to test your change.
• Try to be clean on your change. CodeClimate will keep an eye on you.
• It has to pass on CI.

🤖 Contributors

Thanks goes to these wonderful people (emoji key):

Leandro Lourenci 💬 🐛 💻 📖 💡 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!