)} // Custom column drag ghost renderColumnDragPreview={(column, info) => (

{column.title}

{column.totalChildrenCount} cards

)} // Thin vertical line between columns renderColumnDragIndicator={(column, info) => (

)} onCardMove={(move) => setDataSource(dropHandler(move, dataSource, () => {}))} onColumnMove={(move) => setDataSource(dropColumnHandler(move, dataSource))} /> ``` -------------------------------- ### Enable React-Specific ESLint Rules Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/rkk-demo/README.md Integrate eslint-plugin-react-x and eslint-plugin-react-dom for React and React DOM specific linting. This involves extending their recommended TypeScript and recommended configurations respectively. ```javascript // eslint.config.js import reactX from 'eslint-plugin-react-x' import reactDom from 'eslint-plugin-react-dom' export default tseslint.config([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'] extends: [ // Other configs... // Enable lint rules for React reactX.configs['recommended-typescript'], // Enable lint rules for React DOM reactDom.configs.recommended, ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ]) ``` -------------------------------- ### Custom Kanban Column Headers and Footers Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Customize the appearance and behavior of column headers and footers, including adding elements like buttons and counts. Also shows how to conditionally render list footers and column adders. ```tsx (

{column.title}

{column.totalChildrenCount}

)} renderColumnFooter={(column) => (

)} // Column adder allowColumnAdder={true} renderColumnAdder={() => ( )} // List footer (shown at the bottom of each column's card list) allowListFooter={(column) => column.id !== "done"} renderListFooter={(column) => (

)} /> ``` -------------------------------- ### Implement Infinite Scroll with loadMore and renderSkeletonCard Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt Enables infinite scrolling by automatically calling `loadMore` when skeleton cards enter the viewport. Use `renderSkeletonCard` to customize the placeholder UI. Ensure `totalChildrenCount` is greater than `children.length` to trigger skeleton rendering. ```tsx import { useRef, useCallback, useState } from "react"; import { Kanban, dropHandler } from "react-kanban-kit"; import type { BoardData, BoardItem } from "react-kanban-kit"; // Initial data — only first 10 of 80 cards loaded per column const initialData: BoardData = { root: { id: "root", title: "Root", parentId: null, children: ["col-1"], totalChildrenCount: 1 }, "col-1": { id: "col-1", title: "To Do", parentId: "root", children: ["t-1" // ... 9 more ], totalChildrenCount: 80 }, // ← 70 skeletons will appear }; export function InfiniteBoard() { const [dataSource, setDataSource] = useState(initialData); const loadingColumns = useRef(new Set()); const pageRef = useRef>({}); const loadMore = useCallback((columnId: string) => { if (loadingColumns.current.has(columnId)) return; const col = dataSource[columnId]; if (!col || col.children.length >= col.totalChildrenCount) return; loadingColumns.current.add(columnId); const page = pageRef.current[columnId] ?? 1; fetchPage(columnId, page).then((newItems) => { pageRef.current[columnId] = page + 1; loadingColumns.current.delete(columnId); setDataSource((prev) => { const updated = { ...prev, [columnId]: { ...prev[columnId], children: [...prev[columnId].children, ...newItems.map((i) => i.id)], }, }; newItems.forEach((item) => { updated[item.id] = item as BoardItem; }); return updated; }); }); }, [dataSource]); return (

{data.title}

} }} virtualization={true} loadMore={loadMore} renderSkeletonCard={({ index, column }) => (

Loading card {index + 1} of {column.title}

)} onCardMove={(move) => setDataSource(dropHandler(move, dataSource, () => {}))} /> ); } ``` -------------------------------- ### `configMap` — Multi-type card rendering Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt `configMap` is a plain object whose keys are arbitrary string type names and whose values are `{ render, isDraggable? }` descriptors. Every `BoardItem` card with a matching `type` field is rendered by the corresponding `render` function. Non-matching or missing `type` falls back to the "card" key. Setting `isDraggable: false` on a config entry makes all items of that type non-draggable. ```APIDOC ## `configMap` — Multi-type card rendering ### Description `configMap` is a plain object whose keys are arbitrary string type names and whose values are `{ render, isDraggable? }` descriptors. Every `BoardItem` card with a matching `type` field is rendered by the corresponding `render` function. Non-matching or missing `type` falls back to the `"card"` key. Setting `isDraggable: false` on a config entry makes all items of that type non-draggable (e.g., inline "add card" placeholders or section dividers). ### Configuration Example ```tsx const configMap = { // Standard draggable task card card: { isDraggable: true, render: ({ data, column, index, isDraggable }) => (

{data.title}

), }, // Non-draggable inline "add card" form "new-card": { isDraggable: false, render: ({ column }) => (

), }, // Non-draggable section divider divider: { isDraggable: false, render: ({ data }) => (

{data.title}

), }, }; ``` ``` -------------------------------- ### Utility Functions Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt Helper functions provided by the library to manage the state updates after drag-and-drop operations. ```APIDOC ## Utility Functions ### `dropHandler(move, dataSource, getCardStyles)` #### Description This utility function is used to process the state update after a card is dropped. It takes the move event details, the current data source, and an optional function to get card styles, and returns the new `BoardData`. #### Parameters - **move** (object) - Required - Details about the card move event. - **dataSource** (BoardData) - Required - The current state of the Kanban board data. - **getCardStyles** (function) - Optional - A function that can be used to apply custom styles to cards. #### Returns - **BoardData** - The updated data source after the card move. ### `dropColumnHandler(move, dataSource)` #### Description This utility function is used to process the state update after a column is dropped. It takes the move event details and the current data source, and returns the new `BoardData`. #### Parameters - **move** (object) - Required - Details about the column move event. - **dataSource** (BoardData) - Required - The current state of the Kanban board data. #### Returns - **BoardData** - The updated data source after the column move. ``` -------------------------------- ### BoardData Interface Definition Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Defines the structure for the entire Kanban board data, including the root item and any other items keyed by their IDs. ```typescript interface BoardData { root: BoardItem; [key: string]: BoardItem; } interface BoardItem { id: string; title: string; parentId: string | null; children: string[]; // IDs of loaded children totalChildrenCount: number; // Real total (including unloaded items) content?: any; // Your custom data type?: keyof ConfigMap; // Card type key into configMap isDraggable?: boolean; // Override per-item draggability } ``` -------------------------------- ### Implement Card and Column Click Event Handlers Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt Respond to user interactions with `onCardClick` and `onColumnClick` for standard click events. The `onScroll` handler allows you to detect when a user is nearing the bottom of a column's content. ```tsx { e.stopPropagation(); openCardDetailModal(card.id); }} onColumnClick={(e, column) => { // e.g., expand/collapse collapsed columns if (column.content?.isExpanded) { setDataSource((prev) => toggleCollapsedColumn(column.id, prev)); } }} onScroll={(e, column) => { const { scrollTop, scrollHeight, clientHeight } = e.target; const isNearBottom = scrollHeight - scrollTop - clientHeight < 100; if (isNearBottom) { console.log(`${column.title} nearing bottom`); } }} /> ``` -------------------------------- ### Drag and Drop Customization Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Props for customizing the visual aspects of drag and drop interactions. ```APIDOC ### Drag and Drop Customization - **`allowColumnDrag`** (`boolean`) - Enable column reordering. - **`renderCardDragPreview`** (`(card, info) => ReactNode`) - Custom card drag preview. - **`renderCardDragIndicator`** (`(card, info) => ReactNode`) - Custom card drop indicator. - **`renderColumnDragPreview`** (`(column, info) => ReactNode`) - Custom column drag preview. - **`renderColumnDragIndicator`** (`(column, info) => ReactNode`) - Custom column drop indicator. ``` -------------------------------- ### Customizing Kanban Column Headers, Footers, and Adders Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt Replace default UI elements with custom components using render props. `renderColumnHeader` also acts as the drag handle when `allowColumnDrag` is enabled. Use `allowListFooter` and `allowColumnAdder` to conditionally render footers and adders. ```tsx (

{column.title} {column.totalChildrenCount}

)} // Static footer below the column header, above the card list renderColumnFooter={(column) => (

Sprint · {column.content?.sprintName}

)} // Footer at the bottom of the card list — shown conditionally allowListFooter={(column) => column.id !== "col-done"} renderListFooter={(column) => ( )} // Button appended after all columns allowColumnAdder={true} renderColumnAdder={() => ( )} /> ``` -------------------------------- ### Implement Infinite Scroll for Card Loading Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Enable infinite scroll by providing a `loadMore` callback. The library automatically calls this function when skeleton placeholders scroll into view, allowing on-demand loading of cards. ```tsx import { dropHandler } from "react-kanban-kit"; onCardMove={(move) => { setDataSource( dropHandler( move, dataSource, () => {}, // called with the moved card (optional) (targetColumn) => ({ ...targetColumn, totalChildrenCount: targetColumn.totalChildrenCount + 1, }), (sourceColumn) => ({ ...sourceColumn, totalChildrenCount: sourceColumn.totalChildrenCount - 1, }) ) ); }} ``` -------------------------------- ### Render Kanban Board in View-Only Mode Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Use the `viewOnly` prop to disable all drag and drop interactions on the Kanban board. This is useful for displaying data without allowing modifications. ```tsx ``` -------------------------------- ### Enable Type-Checked ESLint Rules Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/rkk-demo/README.md Configure ESLint to use type-aware lint rules by extending recommendedTypeChecked, strictTypeChecked, or stylisticTypeChecked configurations. Ensure tsconfig.node.json and tsconfig.app.json are specified for project parsing. ```javascript export default tseslint.config([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'] extends: [ // Other configs... // Remove tseslint.configs.recommended and replace with this ...tseslint.configs.recommendedTypeChecked, // Alternatively, use this for stricter rules ...tseslint.configs.strictTypeChecked, // Optionally, add this for stylistic rules ...tseslint.configs.stylisticTypeChecked, // Other configs... ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ]) ``` -------------------------------- ### Enable Read-Only Mode for Kanban Board Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt Set `viewOnly={true}` to disable all drag-and-drop interactions while preserving the visual layout. This is ideal for displaying data in a non-interactive format, such as previews or dashboards. ```tsx ``` -------------------------------- ### Import TypeScript Types for React Kanban Kit Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Import necessary types for using react-kanban-kit with TypeScript. Ensure these types are available in your project. ```typescript import type { BoardData, BoardItem, ConfigMap, CardRenderProps, BoardProps, } from "react-kanban-kit"; ``` -------------------------------- ### ConfigMap and CardRenderProps Definition Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Defines the configuration map for custom card types and the properties passed to custom card render functions. ```typescript type ConfigMap = { [type: string]: { render: (props: CardRenderProps) => React.ReactNode; isDraggable?: boolean; }; }; type CardRenderProps = { data: BoardItem; column: BoardItem; index: number; isDraggable: boolean; }; ``` -------------------------------- ### Enable and Handle Column Drag and Drop Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Enable column reordering via drag and drop. Use `dropColumnHandler` to update the data source when a column is moved. Customize the column header to indicate draggable state. ```tsx import { Kanban, dropColumnHandler } from "react-kanban-kit"; { setDataSource(dropColumnHandler(move, dataSource)); }} renderColumnHeader={(column) => (

{column.title}

)} /> ``` -------------------------------- ### Handle DnD State Changes for Cards and Columns Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt Utilize `onCardDndStateChange` and `onColumnDndStateChange` callbacks to react to drag-and-drop state changes. These are useful for updating external UI elements like highlighting target columns or showing drop zones. ```typescript import type { DndState } from "react-kanban-kit"; ``` ```tsx { // state.type: "idle" | "is-dragging" | "is-dragging-over" if (state.type === "is-dragging") { console.log("Dragging card:", card?.title); } }} onColumnDndStateChange={({ state, column }: DndState) => { // state.type: "idle" | "is-card-over" | "is-column-dragging" if (state.type === "is-card-over") { console.log("Card hovering over column:", column?.title); } }} /> ``` -------------------------------- ### `dropHandler` — Apply a card move to `BoardData` Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt A pure utility function that takes the `DropCardParams` object emitted by `onCardMove` and the current `dataSource`, then returns a new immutable `BoardData` with the card repositioned correctly. Optionally accepts three transform callbacks to mutate the moved card, update the destination column, and update the source column. ```APIDOC ## `dropHandler` — Apply a card move to `BoardData` ### Description A pure utility function that takes the `DropCardParams` object emitted by `onCardMove` and the current `dataSource`, then returns a new immutable `BoardData` with the card repositioned correctly. Optionally accepts three transform callbacks: one to mutate the moved card, one to update the destination column, and one to update the source column (useful for maintaining `totalChildrenCount` / `totalItemsCount` counters). ### Usage Example ```tsx import { dropHandler } from "react-kanban-kit"; import type { BoardData, BoardItem } from "react-kanban-kit"; // Inside your onCardMove handler: onCardMove={(move) => { setDataSource( dropHandler( move, // { cardId, fromColumnId, toColumnId, taskAbove, taskBelow, position } dataSource, // (optional) transform the moved card — receives (destinationColumn, card) (destCol, card) => ({ ...card, content: { ...card.content, status: destCol.title }, }), // (optional) update destination column counters (destCol: BoardItem) => ({ ...destCol, totalChildrenCount: destCol.totalChildrenCount + 1, totalItemsCount: (destCol.totalItemsCount ?? 0) + 1, }), // (optional) update source column counters (srcCol: BoardItem) => ({ ...srcCol, totalChildrenCount: srcCol.totalChildrenCount - 1, totalItemsCount: (srcCol.totalItemsCount ?? 1) - 1, }), ) ); }} ``` ``` -------------------------------- ### Advanced Kanban Board Styling Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Apply custom styles and class names to various parts of the Kanban board, including the root element, column wrappers, headers, and card lists. This allows for extensive visual customization. ```tsx ({ border: `2px solid ${column.content?.color || "#ddd"}`, })} columnWrapperClassName={(column) => `column-wrapper ${column.content?.theme || "default"}` } columnHeaderStyle={(column) => ({ backgroundColor: column.content?.headerColor || "#f8f9fa", })} columnStyle={(column) => ({ minHeight: column.totalChildrenCount > 10 ? "800px" : "400px", })} columnClassName={(column) => column.totalChildrenCount === 0 ? "empty-column" : "has-items" } cardWrapperStyle={(card, column) => ({ opacity: card.content?.archived ? 0.5 : 1, })} cardWrapperClassName="custom-card-wrapper" cardsGap={12} columnListContentStyle={(column) => ({ padding: column.totalChildrenCount === 0 ? "40px 16px" : "8px", })} columnListContentClassName={(column) => `column-content ${column.totalChildrenCount === 0 ? "empty" : "filled"}` } /> ``` -------------------------------- ### Kanban Board CSS Classes Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Lists the default CSS class names applied to various elements within the Kanban board for styling purposes. ```css .rkk-board { } /* Root board container */ .rkk-column-outer { } /* Column outer wrapper */ .rkk-column { } /* Column inner container */ .rkk-column-header { } /* Column header area */ .rkk-column-content { } /* Column scrollable area */ .rkk-column-content-list { } /* Virtual / normal list */ .rkk-generic-item-wrapper { } /* Wrapper around each card */ .rkk-card-outer { } /* Card outer element */ .rkk-card-inner { } /* Card inner draggable element */ .rkk-card-shadow { } /* Card drop position indicator */ .rkk-column-shadow-container { } /* Column drop indicator wrapper */ .rkk-column-shadow { } /* Column drop position indicator */ .rkk-skeleton { } /* Default skeleton card */ ``` -------------------------------- ### TypeScript Type Exports for react-kanban-kit Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt Import essential types for working with the react-kanban-kit in TypeScript projects. These types define the structure of board data, props, and drag-and-drop states. ```typescript import type { BoardData, // { root: BoardItem; [id: string]: BoardItem } BoardItem, // single node (root / column / card) BoardProps, // full props interface for ConfigMap, // { [type: string]: { render: ...; isDraggable?: boolean } } CardRenderProps, // { data, column, index, isDraggable } DndState, // { state: TaskCardState | TColumnState; column?: BoardItem; card?: BoardItem } } from "react-kanban-kit"; ``` -------------------------------- ### dropHandler Utility Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Utility function to update the data source after a card move. ```APIDOC ## `dropHandler` Utility ### Description The `dropHandler` utility function takes the move details from the `onCardMove` event and produces the updated `dataSource`. ### Usage ```tsx import { dropHandler } from "react-kanban-kit"; onCardMove={(move) => { setDataSource( dropHandler( move, dataSource, () => {}, (targetColumn) => ({ ...targetColumn, totalChildrenCount: targetColumn.totalChildrenCount + 1, }), (sourceColumn) => ({ ...sourceColumn, totalChildrenCount: sourceColumn.totalChildrenCount - 1, }) ) ); }} ``` ``` -------------------------------- ### Custom Column Drag Preview Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Override the default drag preview for columns to provide a custom visual representation during drag operations. The `info` object contains details about the dragging state. ```tsx (

{column.title}

{column.totalChildrenCount} cards

)} /> ``` -------------------------------- ### Drag and Drop Events Source: https://github.com/braiekhazem/react-kanban-kit/blob/main/README.md Event handlers triggered during drag and drop operations for cards and columns. ```APIDOC ### Drag and Drop Events - **`onCardMove`** (`(move: CardMove) => void`) - Fired when a card is dropped. - **`onColumnMove`** (`(move: ColumnMove) => void`) - Fired when a column is dropped. - **`onCardDndStateChange`** (`(info: DndState) => void`) - Card drag state changes. - **`onColumnDndStateChange`** (`(info: DndState) => void`) - Column drag state changes. ``` -------------------------------- ### Control Virtual Scrolling Behavior Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt Virtual scrolling is enabled by default (`virtualization={true}`) for performance with large columns. Disable it (`virtualization={false}`) for boards with few cards per column or when card rendering conflicts with virtual list recycling. ```tsx // Large columns — keep virtualization on (default) // Small board (< 20 cards per column) — disable for simpler DOM ``` -------------------------------- ### `dropColumnHandler` — Apply a column reorder to `BoardData` Source: https://context7.com/braiekhazem/react-kanban-kit/llms.txt A pure utility function that takes the `DropColumnParams` object (`{ columnId, fromIndex, toIndex }`) emitted by `onColumnMove` and the current `dataSource`, then returns a new `BoardData` with `root.children` reordered accordingly. ```APIDOC ## `dropColumnHandler` — Apply a column reorder to `BoardData` ### Description A pure utility function that takes the `DropColumnParams` object (`{ columnId, fromIndex, toIndex }`) emitted by `onColumnMove` and the current `dataSource`, then returns a new `BoardData` with `root.children` reordered accordingly. ### Usage Example ```tsx import { dropColumnHandler } from "react-kanban-kit"; onColumnMove={(move) => { // move = { columnId: "col-todo", fromIndex: 0, toIndex: 2 } setDataSource((prev) => dropColumnHandler(move, prev)); }} ``` ```