Editors and workspaces

useKanban

Provides controlled Kanban move requests and accessible props for boards, columns, items, and dedicated drag handles across keyboard, mouse, and touch input.

Copy React example KanbanBoard component

Live component preview · Astro

Explore KanbanBoard

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useKanban.

Planned

Release notesDocs

In progress

Released

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import { Button, Card, KanbanBoard, KanbanColumn, useKanban } from '@santi020k/lumen-react'

export function EditorialBoard() {
  const kanban = useKanban({
    onMoveRequest: ({ itemId, toColumn }) =>
      console.log(`Move ${itemId} to ${toColumn}`)
  })

  return (
    <KanbanBoard {...kanban.rootProps} aria-label="Editorial workflow">
      <KanbanColumn value="planned" {...kanban.getColumnProps('planned')}>
        <Card as="article" {...kanban.getItemProps('draft')}>
          <Button {...kanban.getHandleProps('draft')} aria-label="Move Draft article">
            Move
          </Button>
          <strong>Draft article</strong>
        </Card>
      </KanbanColumn>
      <KanbanColumn value="published" {...kanban.getColumnProps('published')} />
    </KanbanBoard>
  )
}

import { Button, Card, KanbanBoard, KanbanColumn, useKanban } from '@santi020k/lumen-react'

export function EditorialBoard() {
  const kanban = useKanban({
    onMoveRequest: ({ itemId, toColumn }) =>
      console.log(`Move ${itemId} to ${toColumn}`)
  })

  return (
    <KanbanBoard {...kanban.rootProps} aria-label="Editorial workflow">
      <KanbanColumn value="planned" {...kanban.getColumnProps('planned')}>
        <Card as="article" {...kanban.getItemProps('draft')}>
          <Button {...kanban.getHandleProps('draft')} aria-label="Move Draft article">
            Move
          </Button>
          <strong>Draft article</strong>
        </Card>
      </KanbanColumn>
      <KanbanColumn value="published" {...kanban.getColumnProps('published')} />
    </KanbanBoard>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Property	Type	Default	Description
onMoveRequest	(detail: LumenKanbanMoveDetail) => void	-	Receives an accepted move request; the application remains responsible for updating and persisting item ownership.

Controller return values

Property	Type	Description
rootProps	LumenProps<"section">	Spread onto the Kanban board root.
getColumnProps	(column, props?) => LumenProps<"section">	Returns drop-target props for a named column.
getItemProps	(itemId, props?) => LumenProps<"article">	Returns identity props for a controlled item.
getHandleProps	(itemId, props?) => LumenProps<"button">	Returns keyboard, pointer, and drag props for an item move handle.
requestMove	(detail: LumenKanbanMoveDetail) => boolean	Dispatches a cancelable ui:kanban-move-request event and reports whether it was accepted.
rootRef	RefObject<HTMLElement \| null>	Ref for the board element used to resolve items and destinations.