Skip to main content

init

Callback fired once after the first store initialization, before the first render effect runs. Use it to grab the API reference, attach data providers, register interceptors, or wire up setNext.

Subsequent prop-driven reinitializations don't re-fire init. The callback receives the same API object exposed via ref.

Usage​

init?: (api: KanbanInstanceApi) => void;
  • Default: undefined

Example​

Store an API reference for later use:

import { useRef } from "react";
import { Kanban } from "@svar-ui/react-kanban";

function App() {
  const api = useRef(null);

  return (
    <Kanban cards={cards} columns={columns} init={(a) => (api.current = a)} />
  );
}

Attach a REST data provider during initialization:

import { Kanban, RestDataProvider } from "@svar-ui/react-kanban";

const provider = new RestDataProvider("/api/board");

function App() {
  return (
    <Kanban
      cards={cards}
      columns={columns}
      init={(api) => api.setNext(provider)}
    />
  );
}

Register an interceptor to validate cards before they're added:

import { Kanban } from "@svar-ui/react-kanban";

function App() {
  return (
    <Kanban
      cards={cards}
      columns={columns}
      init={(api) => {
        api.intercept("add-card", (ev) => {
          if (!ev.card.label) return false;
        });
      }}
    />
  );
}
  • Working with server - attaching RestDataProvider via init
  • setNext - append a handler chain (typically called from init)
  • intercept - register interceptors (typically called from init)