Skip to main content

onData

Description​

Triggered when the widget needs to load tasks

It allows integration with any data source, such as REST APIs

Usage​

onData?: (value: string | number) => Promise<{
    id?: string | number;
    content: string;
    status?: number;
}[]> | {
    id?: string | number;
    content: string;
    status?: number;
}[];

Parameters​

The onData callback receives a single argument:

  • value - (required) the identifier of the task stream to be loaded

The callback must return either:

  • an array of task objects, or
  • a Promise resolving to an array of task objects

Each task object may include:

  • id - (optional) a unique identifier of the task
  • content - (required) the text content of the task
  • status - (optional) the status of the task that can be 0 for incomplete and 1 for complete

Examples​

Loading tasks through REST helper​

import { RestURL } from "@svar-ui/lib-data-provider";
import { Tasklist } from '@svar-ui/react-tasklist';

const url = new RestURL("https://some.com/api/tasks");

export const App = () => {
  return <Tasklist onData={v => url.get(v)} />;
};

Converting ID of task's stream to data​

import { Tasklist } from '@svar-ui/react-tasklist';

const ondata = (v: string | number) => {
  return fetch(`/api/tasks/${v}`).then(r => r.json());
};

export const App = () => {
  return <Tasklist value={1} onData={ondata} />;
};

onData can return either an array of task objects or a Promise that resolves to an array of task objects.