Hooks

useDocyrusKanban

Kanban board backed by a Docyrus data source. Groups records by an enum, user or date field, and saves a card's move to the API when it is dropped. Enum options marked final become drop zones.

iOSAndroidExpo Go

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-hooks-use-docyrus-kanban
Required Packages(3 packages)
pnpm add @docyrus/api-client @docyrus/app-utils @tanstack/react-query

This is a port of the web hook with the same signature. It builds on useDocyrusDataViewSelect for the schema and saved views. The items request uses the active view's filters and sort, the search keyword and listParams (whose filters are AND-merged with the view's filters). It returns a pre-wired toolbar and board. The board is the native Kanban in grouped-value mode.

Supported group fields: field-select, field-radioGroup, field-status, field-userSelect (one column per user or per team) and field-date / field-dateTime (bucketed by day, week or month; the time part is ignored).

Moving cards: long-press a card to drag it. The hook sends a single PATCH of the group field when you drop the card, never during the drag. Only enum and user columns can be changed this way. Date buckets and team columns are derived, so a card dropped there snaps back.

Usage

import { useDocyrusClient } from '@docyrus/signin/react-native';

import { useDocyrusKanban } from '@/hooks/docyrus-native/use-docyrus-kanban';

export function TasksBoard() {
  const client = useDocyrusClient();

  const { toolbar, board } = useDocyrusKanban({
    client: client!,
    appSlug: 'base',
    dataSourceSlug: 'task',
    groupByFieldSlug: 'status',
    titleColumn: 'subject',
    descriptionColumn: 'description',
    userColumn: 'created_by',
    persistState: true,
    onCardOpen: row => router.push(`/tasks/${row.id}`),
    cardMenuItems: (row, defaults) => [
      { key: 'duplicate', label: 'Duplicate', icon: 'fal copy', onAction: duplicate },
      ...defaults
    ]
  });

  return (
    <ScrollView>
      {toolbar}
      {board}
    </ScrollView>
  );
}

API Reference

Options (UseDocyrusKanbanOptions<TData>)

Extends every useDocyrusDataViewSelect option (appId, staleTime, systemViews, persistKey, activeViewStorage, …).

PropTypeDefaultDescription
clientRestApiClient—Authenticated Docyrus API client (required)
appSlugstring—App slug (required)
dataSourceSlugstring—Data source slug (required)
groupByFieldSlugstring—Field whose values become the columns (required)
dataTData[]—Pre-loaded rows. When set, the items query is skipped
collectionDocyrusKanbanCollection<TData>—Custom list / update / remove adapter
listParamsDocyrusKanbanListParams—Extra query params. filters is AND-merged; every other key overrides
defaultLimitnumber200Page size
enableItemsQuerybooleandata === undefinedRuns the internal items query
dateGroupBy'day' | 'week' | 'month''day'Initial date bucket
userGroupBy'user' | 'team''user'Initial user grouping
showAllColumnsbooleantrueEnum grouping: also shows options with no cards
avatarColumnstring—Field for the card avatar (icon, color or image)
titleColumnstring—Field for the card title
descriptionColumnstring—Field for the card description
userColumnstring—User field shown in the card footer
cardContent(ctx: DocyrusKanbanCardContext<TData>) => ReactNode—Extra card content
cardMenuItemsDocyrusKanbanCardMenuItem<TData>[] | (row, defaults) => DocyrusKanbanCardMenuItem<TData>[]Open / Edit / DeleteItems of the card's action sheet
cardActionsReadonlyArray<'open' | 'edit' | 'delete'>['open', 'edit', 'delete']Built-in actions to keep
onCardOpen(row) => void—Open action. Also handles card taps when onCardClick is not set
onCardEdit(row) => void—Edit action
onCardDelete(row) => void | Promise<void>API deleteCustom delete, run after the confirmation dialog
onCardClick(row) => voidonCardOpenCard tap
enableViewSelectbooleantrueSaved-view picker (shown when views exist)
enableSearchInputbooleantrueSearch input
enableDateGroupMenubooleantrueDate-bucket picker (date grouping only)
enableUserGroupMenubooleantrueUser / team picker (user grouping only)
enableShowAllColumnsSwitchbooleantrue"Show all" switch (enum grouping only)
enableReloadButtonbooleantrueReload button
onReload() => void—Called after a reload
searchPlaceholderstringt('ui.kanban.search', 'Search…')Search placeholder
searchDebounceMsnumber300Search debounce in ms
toolbarClassNamestring—Classes for the toolbar root
toolbarStartContentReactNode—Content before the view picker
toolbarEndContentReactNode—Content at the end of the control row
onItemMove(params: { row, fromColumnId, toColumnId, column }) => void—Called after a drop into another column. The built-in PATCH still runs
onItemMoveCommit(params: { row, fromColumnId, toColumnId, column, payload }) => void | Promise<void>—Takes over saving the move. Throw or reject to roll the board back
persistStateboolean | { storage?: 'session' | 'local'; key?: string }—Saves search, date / user grouping and "show all" for each saved view (…:kanban). The active view follows the same store

DocyrusKanbanCardMenuItem

FieldTypeDescription
keystringStable key
labelstringRow label (native: string)
iconstringDocyrusIcon string, e.g. 'fal pen' (native: string)
destructivebooleanRed row
disabledboolean | (row) => booleanDisables the row
onAction(row) => voidRuns after the sheet closes

Result (UseDocyrusKanbanResult<TData>)

KeyTypeDescription
toolbarReactNodeToolbar plus the delete dialog and card action sheet. Always render it
boardReactNodeThe board. Shows a spinner while loading and an empty state for an unsupported field
itemsTData[]Rows on the board
resolvedListParamsDocyrusKanbanListParamsQuery payload
groupByFieldDataSourceField | undefinedGroup field metadata
columnsDocyrusKanbanColumnMeta[]Visible columns (id, label, color, icon, imageUrl, isFinal, count)
columnsItemsRecord<string, TData[]>Rows grouped by column id
dateGroupBy / setDateGroupByDocyrusKanbanDateGroupBy / setterDate bucket
userGroupBy / setUserGroupByDocyrusKanbanUserGroupBy / setterUser grouping
showAllColumns / setShowAllColumnsboolean / setter"Show all" switch
reload / refetch() => voidRefetches the views and the items
views / fields / forms / dataSource / activeViewId / setActiveViewId / isLoading / error / hasNoViews—From useDocyrusDataViewSelect

Exports

DOCYRUS_KANBAN_SUPPORTED_FIELD_TYPES (Set<string>) and readUserMeta(value, mode), which normalizes a user or team payload to { id, label, imageUrl }.

Native deltas

  • The card ⋮ button (and the info icon) opens an action sheet with the menu items. The created / modified audit trail is the sheet message, where web uses a hover tooltip. label and icon are strings.
  • Delete asks for confirmation in the native RecordDeleteConfirmDialog.
  • If a move fails (the built-in PATCH rejects or onItemMoveCommit throws), the board returns to the server's distribution.
  • The toolbar is stacked: start content and view picker, then search, then a horizontal row with the group pickers, "Show all", reload and end content.

Translation Keys

KeyFallback
ui.kanban.searchSearch…
ui.kanban.viewView
ui.kanban.groupByGroup by
ui.kanban.day / week / monthDay / Week / Month
ui.kanban.user / teamUser / Team
ui.kanban.showAllShow all
ui.kanban.uncategorizedUncategorized
ui.kanban.weekOfWeek of
ui.kanban.open / edit / deleteOpen / Edit / Delete
ui.kanban.cardActionsCard actions
ui.kanban.recordInfoRecord info
ui.kanban.created / modifiedCreated / Modified
ui.kanban.configureGroupByConfigure a group-by field that points to …
ui.kanban.unsupportedFieldThis field is not supported as a kanban group column:

Type Exports

TypeDescription
UseDocyrusKanbanOptions<TData> / UseDocyrusKanbanResult<TData>Hook options and result
DocyrusKanbanCollection<TData>Collection adapter
DocyrusKanbanListParamsQuery params
DocyrusKanbanColumnMetaColumn metadata
DocyrusKanbanCardMenuItem<TData> / DocyrusKanbanCardAction / DocyrusKanbanCardContext<TData>Card types
DocyrusKanbanDateGroupBy / DocyrusKanbanUserGroupByGrouping modes

On this page