Skip to main content

registerEditorItem

Registers a custom React component under a string name so it can be referenced via comp in the editor's items array. Call once at module scope.

The kanban editor pre-registers richselect, multicombo, datepicker, and slider.

Usage​

import { registerEditorItem } from "@svar-ui/react-kanban";
import type { ComponentType } from "react";

registerEditorItem(name: string, component: ComponentType): void;
ParameterTypeDescription
namestringIdentifier used as comp in editor item descriptors
componentComponentTypeReact component receiving value, onChange, and promoted config fields

The component must call onChange({ value }) on change. Fields in the item's config object are promoted to top-level props.

Example​

Registering a custom comments component:

import { useState } from "react";
import { Kanban, Editor, registerEditorItem } from "@svar-ui/react-kanban";
import Comments from "./Comments.jsx";

registerEditorItem("comments", Comments);

const items = [
    { comp: "text", key: "label", label: "Label" },
    { comp: "textarea", key: "description", label: "Description" },
    { comp: "comments", key: "comments", label: "Comments" },
];

function App() {
    const [api, setApi] = useState(null);

    return (
        <>
            <Kanban init={setApi} cards={cards} columns={columns} />
            {api && <Editor api={api} items={items} />}
        </>
    );
}

Registering multiple components:

import { registerEditorItem } from "@svar-ui/react-kanban";
import Comments from "./Comments.jsx";
import Tasklist from "./Tasklist.jsx";

registerEditorItem("comments", Comments);
registerEditorItem("tasks", Tasklist);

const items = [
    { comp: "text", key: "label", label: "Label" },
    { comp: "comments", key: "comments", label: "Comments" },
    { comp: "tasks", key: "tasks", label: "Checklist" },
];