Skip to main content

value

Description​

Optional. An array of task objects to initialize the tasklist widget

Usage​

value?: string | number | {
  id?: string | number;
  content: string;
  status?: number;
}[];

Parameters​

The value property can be defined in several ways:

  • string | number - a task identifier
  • 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​

Initializing tasklist widget with data​

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

const value = [
  {
    id: 7,
    content: "Optimize performance in React applications",
    status: 1,
  },
  {
    id: 8,
    content:
      "Work with API requests and data handling in React applications",
    status: 0,
  }
];

export default function Example() {
  return <Tasklist value={value} />;
}

Initializing an empty tasklist widget​

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

export default function Example() {
  return <Tasklist />;
}

Initializing widget and loading tasks​

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

export default function Example() {
  const [value, setValue] = useState<
    Array<{ id?: string | number; content: string; status?: number }> | null
  >(null);

  useEffect(() => {
    fetch('/api/tasks')
      .then(r => r.json())
      .then(x => setValue(x));
  }, []);

  if (value === null) return <div>Loading...</div>;

  return <Tasklist value={value} />;
}