### Install wx-react-gantt package using npm

Source: https://docs.svar.dev/react/gantt/getting_started

This command installs the SVAR React Gantt library from NPM. Ensure you have Node.js and npm installed on your system.

```bash
npm install wx-react-gantt
```

--------------------------------

### Import Gantt component and CSS

Source: https://docs.svar.dev/react/gantt/getting_started

Import the Gantt component and its default CSS file into your React project. This is the first step to using the Gantt chart.

```javascript
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
```

--------------------------------

### Initialize Gantt chart with tasks, links, and scales

Source: https://docs.svar.dev/react/gantt/getting_started

This React component demonstrates initializing a Gantt chart with sample tasks, a dependency link between tasks, and custom scales (monthly and daily views). It also includes the necessary imports for the Gantt component and its CSS.

```javascript
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React, { useRef, useEffect } from "react";

const MyGanttComponent = () => {
  const tasks = [
    {
      id: 20,
      text: "New Task",
      start: new Date(2024, 5, 11),
      end: new Date(2024, 6, 12),
      duration: 1,
      progress: 2,
      type: "task",
      lazy: false,
    },
    {
      id: 47,
      text: "[1] Master project",
      start: new Date(2024, 5, 12),
      end: new Date(2024, 7, 12),
      duration: 8,
      progress: 0,
      parent: 0,
      type: "summary",
    },
    {
      id: 22,
      text: "Task",
      start: new Date(2024, 7, 11),
      end: new Date(2024, 8, 12),
      duration: 8,
      progress: 0,
      parent: 47,
      type: "task",
    },
    {
      id: 21,
      text: "New Task 2",
      start: new Date(2024, 7, 10),
      end: new Date(2024, 8, 12),
      duration: 3,
      progress: 0,
      type: "task",
      lazy: false,
    },
  ];

  const links = [{ id: 1, source: 20, target: 21, type: "e2e" }];

  const scales = [
    { unit: "month", step: 1, format: "MMMM yyy" },
    { unit: "day", step: 1, format: "d" },
  ];

  return <Gantt tasks={tasks} links={links} scales={scales} />;
};

export default MyGanttComponent;
```

--------------------------------

### Install SVAR Gantt React using npm or yarn

Source: https://docs.svar.dev/react/gantt/guides/installation_initialization

This snippet shows how to install the wx-react-gantt library using either npm or yarn. Ensure you have Node.js and npm/yarn installed.

```npm
npm install wx-react-gantt
```

```yarn
yarn add wx-react-gantt
```

--------------------------------

### Initialize an empty Gantt chart

Source: https://docs.svar.dev/react/gantt/getting_started

This React component initializes an empty Gantt chart. It imports the Gantt component and its CSS, then renders the component without any specific data or configurations.

```javascript
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

function App() {
  return <Gantt />;
}

export default App;
```

--------------------------------

### Full React Example with Toolbar and Gantt

Source: https://docs.svar.dev/react/gantt/helpers/toolbar_component

A comprehensive React example demonstrating how to import and use both the Toolbar and Gantt components from 'wx-react-gantt'. It includes setting up a ref for the Gantt API and defining the toolbar items.

```jsx
import { getData } from "../data";
import { Gantt, Toolbar } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React, { useRef } from "react";

const Component = () => {
  const apiRef = useRef();
  const data = getData();

  const items = [
    {
      id: "add-task",
      comp: "button",
      icon: "wxi-plus",
      text: "Add task",
      type: "primary",
    },
    {
      id: "edit-task",
      comp: "button",
      icon: "wxi-edit",
      text: "edit",
      type: "link",
    },
  ];

  return (
    <>
      <Toolbar api={apiRef.current} items={items} />
      <Gantt apiRef={apiRef} tasks={data.tasks} />
    </>
  );
};

export default Component;
```

--------------------------------

### Apply Willow theme to Gantt chart

Source: https://docs.svar.dev/react/gantt/getting_started

This React component demonstrates how to apply the 'Willow' theme to the Gantt chart by wrapping the Gantt component with the Willow theme provider. It also includes necessary imports for React, Gantt, the Willow theme, and the Gantt CSS.

```javascript
import React from 'react';
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import { Willow } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css"; //import theme

const Component = () => {
  const data = getData();

  return (
    <Willow>
      <Gantt tasks={data.tasks} />
    </Willow>
  );
};

export default Component;
```

--------------------------------

### Task Creation Payload Example

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/post_tasks

This JSON object represents the payload required to create a new task. It includes fields for the task's text, parent, start and end dates, duration, type, and progress.

```json
{
    "text": "New Task",
    "parent": 20,
    "start": "2024-06-21 00:00:00",
    "duration": 1,
    "end": "2024-06-22 00:00:00",
    "id": "temp://1710851071459",
    "progress": 0,
    "type": "task",
    "details": "" 
}
```

--------------------------------

### Example Usage of indent-task in React Gantt Component

Source: https://docs.svar.dev/react/gantt/api/actions/indent-task

Demonstrates how to use the 'indent-task' action within a React component using the wx-react-gantt library. It shows how to import necessary components, get data, and execute the action via a ref.

```javascript
import React, { useRef, useEffect } from "react";  
import { getData } from "./common/data";  
import { Gantt } from "wx-react-gantt";  
import "wx-react-gantt/dist/gantt.css";  
  
const App = () => {  
  const data = getData();  
  const apiRef = useRef(null);  
  
  useEffect(() => {  
    if (apiRef.current) {  
      apiRef.current.exec("indent-task", {  
        id: 3,  
        mode: true,  
      });  
    }  
  }, [apiRef.current]);  
  
  return (  
    <Gantt  
      apiRef={apiRef}  
      tasks={data.tasks}  
      //other settings  
    />  
  );  
};  
  
export default App;  

```

--------------------------------

### Example Batch Request with Tasks and Links

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/post_batch

Provides a concrete example of a batch request payload containing two operations: creating a new task and creating a link between two items.

```json
[
    {
        "data": {
            "text": "New Task",
            "parent": 20,
            "start": "2024-06-21 00:00:00",
            "duration": 1,
            "end": "2024-06-22 00:00:00",
            "id": "temp://1710851071459",
            "progress": 0,
            "type": "task"
        },
        "method": "POST",
        "url": "tasks"
    },
    {
        "data": {
             "id": "temp://1710929724740",
             "source": 69,
             "target": 70,
             "type": "s2s"
        },
        "method": "POST",
        "url": "links"
    }
]
```

--------------------------------

### Example Usage of Gantt Links in React

Source: https://docs.svar.dev/react/gantt/api/properties/links

Demonstrates how to import and use the Gantt component in a React application, including passing a predefined array of task links. This example showcases the 'links' prop within the Gantt component.

```javascript
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const { tasks, scales, columns } = getData();

const links = [
  { id: 1, source: 3, target: 4, type: "e2s" },
  { id: 2, source: 1, target: 2, type: "e2s" },
  { id: 21, source: 8, target: 1, type: "s2s" },
  { id: 22, source: 1, target: 6, type: "s2s" },
];

function App() {
  return <Gantt tasks={tasks} scales={scales} columns={columns} links={links} />;
}

export default App;
```

--------------------------------

### Get Task Data (JSON Example)

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/get_tasks

This snippet shows the expected JSON response format when making a GET request to the /tasks endpoint. It includes details like task ID, text, start and end dates, duration, progress, parent ID, type, and lazy loading status.

```json
[
    {
        "id": 20,
        "text": "New Task",
        "start": "2024-06-21 00:00:00",
        "end": "2024-06-22 00:00:00",
        "duration": 1,
        "progress": 2,
        "parent": 0,
        "type": "task",
        "lazy": false
    },
    {
        "id": 47,
        "text": "[1] Master project",
        "start": "2024-06-10 00:00:00",
        "end": "2024-06-18 00:00:00",
        "duration": 8,
        "progress": 0,
        "parent": 0,
        "type": "summary",
        "lazy": true
    },
    {
        "id": 21,
        "text": "New Task",
        "start": "2024-06-13 00:00:00",
        "end": "2024-06-14 00:00:00",
        "duration": 1,
        "progress": 0,
        "parent": 20,
        "type": "task",
        "lazy": false
    }
]
```

--------------------------------

### Get Task Links Data (JSON Example)

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/get_links_id

Example JSON response for the GET /links/{taskId} endpoint, showing link data including ID, source, target, and type.

```json
[
    {
        "id": 9,
        "source": 60,
        "target": 61,
        "type": "e2s"
    },
    {
        "id": 10,
        "source": 48,
        "target": 49,
        "type": "s2s"
    },
    {
        "id": 11,
        "source": 54,
        "target": 56,
        "type": "e2s"
    },
    {
        "id": 12,
        "source": 56,
        "target": 58,
        "type": "s2s"
    },
    {
        "id": 13,
        "source": 49,
        "target": 50,
        "type": "e2s"
    },
    {
        "id": 14,
        "source": 56,
        "target": 57,
        "type": "s2s"
    },
    {
        "id": 15,
        "source": 53,
        "target": 54,
        "type": "s2s"
    },
    {
        "id": 16,
        "source": 64,
        "target": 65,
        "type": "e2s"
    }
]
```

--------------------------------

### Include icon font CSS for missing icons

Source: https://docs.svar.dev/react/gantt/getting_started

This HTML snippet provides a link to the icon font CSS required for the Gantt component. Add this to your HTML file if icons are not displaying correctly.

```html
<link rel="stylesheet" href="https://cdn.svar.dev/fonts/wxi/wx-icons.css" />
```

--------------------------------

### React Example: Filtering Context Menu Options

Source: https://docs.svar.dev/react/gantt/helpers/context_menu

A comprehensive React example demonstrating how to use the ContextMenu component. It includes importing necessary components from 'wx-react-gantt', setting up a Gantt chart, and implementing a filter function to conditionally hide menu options based on task type.

```javascript
import { useRef } from "react";  
import { getData } from "../data";  
import { Gantt, ContextMenu } from "wx-react-gantt";  
import "wx-react-gantt/dist/gantt.css";  
  
const MyComponent = () => {  
  const apiRef = useRef();  
  const data = getData();  
  
  const filterMenu = (option, task) => {  
    const type = task.type;  
    if (option.id === "delete-task" && type === "project") return false;  
    return true;  
  };
  
  return (  
    <ContextMenu api={apiRef.current} filter={filterMenu}>  
      <Gantt  
        apiRef={apiRef}  
        tasks={data.tasks}  
        links={data.links}  
        scales={data.scales}  
      />  
    </ContextMenu>  
  );
};

export default MyComponent;
```

--------------------------------

### Initialize SVAR Gantt React Component (Basic)

Source: https://docs.svar.dev/react/gantt/guides/installation_initialization

Demonstrates the basic import and usage of the Gantt component from the wx-react-gantt library. This will render an empty Gantt chart structure.

```javascript
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

function Component() {
  return <Gantt />;
}

export default Component;
```

--------------------------------

### GET /links

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/get_links

Retrieves a list of links with their source, target, and type.

```APIDOC
## GET /links

### Description
Gets data on links. The route handles the HTTP GET request made to the `/links` path.

### Method
GET

### Endpoint
/links

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **id** (integer) - Unique identifier for the link.
- **source** (integer) - Identifier for the source element.
- **target** (integer) - Identifier for the target element.
- **type** (string) - The type of link (e.g., 'e2s', 's2s').

#### Response Example
```json
[
    {
        "id": 9,
        "source": 60,
        "target": 61,
        "type": "e2s"
    },
    {
        "id": 10,
        "source": 48,
        "target": 49,
        "type": "s2s"
    }
]
```
```

--------------------------------

### API Response Example (JSON)

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/put_links

Example of a successful JSON response after updating a link. It typically returns the ID of the updated link.

```json
{
 "id": 1
}
```

--------------------------------

### Example Usage of activeTask in wx-react-gantt

Source: https://docs.svar.dev/react/gantt/api/properties/activeTask

This example demonstrates how to use the activeTask prop within a React component using the wx-react-gantt library. It imports necessary components and data, then renders the Gantt chart with a specified active task.

```jsx
import { getData } from "../data";  
import { Gantt } from "wx-react-gantt";  
import "wx-react-gantt/dist/gantt.css";  

const data = getData();  

function App() {  
  return <Gantt tasks={data.tasks} activeTask={4} />;  
}  

export default App;
```

--------------------------------

### React Example: Handling drag-task Event

Source: https://docs.svar.dev/react/gantt/api/actions/drag-task

Demonstrates how to integrate the wx-react-gantt component in a React application and attach a listener to the 'drag-task' event to log the ID of the dragged task.

```javascript
import React, { useRef, useEffect } from "react";  
import { getData } from "./common/data";  
import { Gantt } from "wx-react-gantt";  
import "wx-react-gantt/dist/gantt.css";  
  
const App = () => {  
  const apiRef = useRef();  
  const data = getData();  
  
  useEffect(() => {  
    if (apiRef.current) {  
      apiRef.current.on("drag-task", ev => {  
        console.log("The id of the dragged task:", ev.id);  
      });  
    }  
  }, [apiRef.current]);  
  
  return (  
    <Gantt  
      ref={apiRef}  
      tasks={data.tasks}  
      links={data.links}  
      //other settings  
    />  
  );  
};  
  
export default App;  
```

--------------------------------

### GET /tasks

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/get_tasks

Retrieves a list of tasks. The endpoint handles GET requests to the /tasks path and returns task data in JSON format.

```APIDOC
## GET /tasks

### Description
Gets data on tasks. The route handles the HTTP GET request made to the `/tasks` path.

### Method
GET

### Endpoint
/tasks

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
No payload is required.

### Request Example
None

### Response
#### Success Response (200)
The server returns a JSON array with data on tasks.
- **id** (integer) - Unique identifier for the task.
- **text** (string) - The text description of the task.
- **start** (string) - The start date and time of the task (YYYY-MM-DD HH:MM:SS).
- **end** (string) - The end date and time of the task (YYYY-MM-DD HH:MM:SS).
- **duration** (integer) - The duration of the task.
- **progress** (integer) - The progress of the task (0-100).
- **parent** (integer) - The ID of the parent task, or 0 if it's a top-level task.
- **type** (string) - The type of the item (e.g., "task", "summary").
- **lazy** (boolean) - Indicates if the task data is loaded lazily.

#### Response Example
```json
[
    {
        "id": 20,
        "text": "New Task",
        "start": "2024-06-21 00:00:00",
        "end": "2024-06-22 00:00:00",
        "duration": 1,
        "progress": 2,
        "parent": 0,
        "type": "task",
        "lazy": false
    },
    {
        "id": 47,
        "text": "[1] Master project",
        "start": "2024-06-10 00:00:00",
        "end": "2024-06-18 00:00:00",
        "duration": 8,
        "progress": 0,
        "parent": 0,
        "type": "summary",
        "lazy": true
    },
    {
        "id": 21,
        "text": "New Task",
        "start": "2024-06-13 00:00:00",
        "end": "2024-06-14 00:00:00",
        "duration": 1,
        "progress": 0,
        "parent": 20,
        "type": "task",
        "lazy": false
    }
]
```
```

--------------------------------

### API Request Payload Example (JSON)

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/put_links

Example of the JSON payload required for updating a link. It includes fields like id, source, target, and type, representing both old and new data for the task.

```json
{
    "id": 17,
    "source": 69,
    "target": 70,
    "type": "e2e"
}
```

--------------------------------

### Task Creation Response Example

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/post_tasks

This JSON object shows the expected response from the server after successfully creating a new task. It contains the ID of the newly created task.

```json
{
"id":13
}
```

--------------------------------

### Batch Request Response Example

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/post_batch

Illustrates the expected JSON array response from a batch request, where each element corresponds to the result of an individual request in the payload.

```json
[{"id":13},{"id":17}]
```

--------------------------------

### Example Task Object Returned by getTask()

Source: https://docs.svar.dev/react/gantt/api/methods/getTask

Provides an example of a task object that the getTask() method might return, illustrating typical values for its properties.

```javascript
{
  id: 3,
  start: Thu Mar 05 2020 00:00:00 GMT+0300 (Moscow Standard Time),
  end: Sat Mar 07 2020 00:00:00 GMT+0300 (Moscow Standard Time),
  text: 'Task 3',
  progress: 6,
  type:"summary",
  duration:2,
  parent:0
}
```

--------------------------------

### Copy Task Response Example (JSON)

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/put_tasks

Example JSON response indicating a successful task copy operation, providing the ID of the newly created task.

```json
{
"id":67
}
```

--------------------------------

### Move Task Response Example (JSON)

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/put_tasks

Example JSON response after successfully moving a task, returning the ID of the moved task.

```json
{
  "id":34
}
```

--------------------------------

### Get Gantt Data Stores (JavaScript)

Source: https://docs.svar.dev/react/gantt/api/overview/methods_overview

Returns an object containing the DataStore properties of the Gantt chart. This provides access to task and link data management.

```javascript
const stores = gantt.getStores();
```

--------------------------------

### React Gantt Component Usage Example

Source: https://docs.svar.dev/react/gantt/api/properties/tasks

Demonstrates how to use the Gantt component in a React application. It imports necessary modules, fetches data, defines task configurations, and renders the Gantt chart with the provided tasks, links, scales, and columns. Ensure the date format is compatible with date-fns.

```javascript
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React, { useRef, useEffect } from "react";

const GanttComponent = () => {
  const { links, scales, columns } = getData();

  const tasks = [
    {
      id: 1,
      open: true,
      start: new Date(2020, 11, 6),
      duration: 8,
      text: "React Gantt Widget",
      progress: 60,
      type: "summary"
    },
    {
      id: 2,
      parent: 1,
      start: new Date(2020, 11, 6),
      duration: 4,
      text: "Lib-Gantt",
      progress: 80
    },
  ];

  return <Gantt tasks={tasks} links={links} scales={scales} columns={columns} />;
};

export default GanttComponent;
```

--------------------------------

### Create New Link Response

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/post_links

This is an example of the JSON response received after successfully creating a new link. It contains the unique identifier assigned to the newly created link.

```json
{
  "id": 17
}
```

--------------------------------

### add-task Action

Source: https://docs.svar.dev/react/gantt/api/actions/add-task

This section describes the 'add-task' action, which is triggered when a new task is added to the Gantt chart. It outlines the parameters required for this action and provides examples of how to use it.

```APIDOC
## add-task

### Description
Fires when adding a new task.

### Method
POST (simulated via exec)

### Endpoint
N/A (Client-side action)

### Parameters
#### Request Body
- **id** (string | number) - Optional - The ID of the new task.
- **target** (string | number) - Required - The ID of the task before or after which a new task will be added.
- **task** (object) - Required - The task object containing task details.
- **mode** (string) - Required - Specifies the placement of the new task: 'before', 'after', or 'child'.

### Request Example
```javascript
apiRef.current.exec("add-task", {
    id: 10,
    target: 5,
    task: {
        text: "New Task",
        startDate: "2023-01-01",
        duration: 5
    },
    mode: "child"
});
```

### Response
#### Success Response (200)
- **void** - The action may return void or a boolean indicating success/failure.

#### Response Example
```json
// No specific response body is defined for this action.
```
```

--------------------------------

### Update Task Payload Example (JSON)

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/put_tasks

Provides an example JSON payload for updating a task. This includes all fields for a task, both old and new/modified data.

```json
{
    "id": 67,
    "text": "New Task",
    "start": "2024-06-10 00:00:00",
    "end": "2024-06-11 00:00:00",
    "duration": 1,
    "progress": 0,
    "parent": 0,
    "type": "task",
    "lazy": false,
    "details": " "
}
```

--------------------------------

### React Example: Moving a Task in Gantt Chart

Source: https://docs.svar.dev/react/gantt/api/actions/move-task

Demonstrates how to use the Gantt chart's API to move a selected task up. It utilizes React hooks for state management and refs, and imports necessary components from 'wx-react-gantt' and 'wx-react-wx'.

```javascript
import React, { useState, useRef } from "react";  
import { getData } from "./common/data";  
import { Gantt } from "wx-react-gantt";  
import "wx-react-gantt/dist/gantt.css";  
import { Button } from "wx-react-wx";  
  
const App = () => {  
  const data = getData();  
  const apiRef = useRef();  
  const [selected, setSelected] = useState(null);  
  
  const handleMove = (mode) => {  
    apiRef.current.exec("move-task", { id: selected, mode });  
  };  
  
  return (  
    <>  
      <Toolbar>  
        {selected && (  
          <Button  
            type="primary"  
            onClick={() => {  
              handleMove("up");  
            }}  
          >  
            Move task up  
          </Button>  
        )}  
      </Toolbar>  
      <Gantt  
        apiRef={apiRef}  
        tasks={data.tasks}  
        //other settings  
      />  
    </>  
  );  
};  
  
export default App;  
```

--------------------------------

### Example React Gantt Chart with Zoom Configuration

Source: https://docs.svar.dev/react/gantt/api/properties/zoom

Demonstrates how to import and use the Gantt component from 'wx-react-gantt' with a comprehensive zoom configuration object. This example showcases setting multiple zoom levels, each with specific cell width constraints and scale definitions for units like years, quarters, months, days, and hours.

```javascript
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const data = getData();

const zoomConfig = {
  maxCellWidth: 400,
  level: 3,
  levels: [
    {
      minCellWidth: 200,
      scales: [{ unit: "year", step: 1, format: "yyyy" }],
    },
    {
      minCellWidth: 150,
      scales: [
        { unit: "year", step: 1, format: "yyyy" },
        { unit: "quarter", step: 1, format: "QQQQ" },
      ],
    },
    {
      minCellWidth: 250,
      scales: [
        { unit: "quarter", step: 1, format: "QQQQ" },
        { unit: "month", step: 1, format: "MMMM yyy" },
      ],
    },
    {
      minCellWidth: 100,
      scales: [
        { unit: "month", step: 1, format: "MMMM yyy" },
        { unit: "week", step: 1, format: "'week' w" },
      ],
    },
    {
      maxCellWidth: 200,
      scales: [
        { unit: "month", step: 1, format: "MMMM yyy" },
        { unit: "day", step: 1, format: "d", css: dayStyle },
      ],
    },
    {
      minCellWidth: 25,
      scales: [
        { unit: "day", step: 1, format: "MMM d", css: dayStyle },
        { unit: "hour", step: 6, format: hoursTemplate },
      ],
    },
    {
      scales: [
        { unit: "day", step: 1, format: "MMM d", css: dayStyle },
        { unit: "hour", step: 1, format: "HH:mm" },
      ],
    },
  ],
};

function App() {
  return (
    <Gantt zoom={zoomConfig} tasks={data.tasks} />
  );
}

export default App;

```

--------------------------------

### React Gantt with Text Editor Configuration

Source: https://docs.svar.dev/react/gantt/api/properties/editorShape

Example of integrating wx-react-gantt with a customized text editor shape. It demonstrates how to set a placeholder and focus for a 'Name' field.

```javascript
import React, { useRef } from "react";
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const data = getData();
const editorShape = [
  {
    key: "Text",
    type: "text",
    label: "Name",
    config: {
      placeholder: "Task name",
      focus: true,
    },
  },
];

function App() {
    
  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      columns={data.columns}
      editorShape={editorShape}
    />
  );
}

export default App;
```

--------------------------------

### getData() Method - Basic Implementation

Source: https://docs.svar.dev/react/gantt/helpers/rest_methods/getdata_method

Provides a basic JavaScript implementation of the `getData()` function, which returns a resolved promise with an empty array. This serves as a placeholder or initial setup for fetching Gantt chart data.

```javascript
function getData() { 
  return Promise.resolve([]); 
}
```

--------------------------------

### Execute add-task Event

Source: https://docs.svar.dev/react/gantt/api/actions/add-task

Demonstrates how to trigger the 'add-task' event using the `api.exec` method. This example shows integrating the Gantt chart with a button to add new tasks.

```javascript
import { getData } from "./common/data";  
import { Gantt, Toolbar } from "wx-react-gantt";  
import "wx-react-gantt/dist/gantt.css";  
import { Button } from "wx-react-wx";  
import { useRef } from "react";  
  
function App() {  
  const data = getData();  
  const apiRef = useRef();  
  
  function handleAdd() {  
    if (apiRef.current) {  
      apiRef.current.exec("add-task", { task: {} });  
    }  
  }  
  
  return (  
    <>
      <Toolbar>  
        <Button type="primary" onClick={handleAdd}>Add task</Button>  
      </Toolbar>  
      <Gantt  
        apiRef={apiRef}  
        tasks={data.tasks}  
        links={data.links}  
        scales={data.scales}  
        columns={data.columns}  
      />  
    </>
  );  
}  
  
export default App;  
```

--------------------------------

### Update Task Response Example (JSON)

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/put_tasks

Example JSON response received after a successful task update operation, containing the ID of the updated task.

```json
{
"id":23
}
```

--------------------------------

### React Example for Handling 'copy-task'

Source: https://docs.svar.dev/react/gantt/api/actions/copy-task

A React component demonstrating how to use the Gantt API to listen for and handle the 'copy-task' event. It logs the ID of the copied task to the console.

```jsx
import { useEffect, useRef } from "react";  
import { getData } from "./common/data";  
import { Gantt } from "wx-react-gantt";  
import "wx-react-gantt/dist/gantt.css";  
  
const MyGanttComponent = () => {  
  const data = getData();  
  const apiRef = useRef(null);  
  
  useEffect(() => {  
    if (apiRef.current) {  
      apiRef.current.on("copy-task", (ev) => {  
        console.log("The id of the copied task:", ev.id);  
      });  
    }  
  }, [apiRef.current]);  
  
  return (  
    <Gantt  
      ref={apiRef}  
      tasks={data.tasks}  
      //other settings  
    />  
  );  
};  
  
export default MyGanttComponent;  

```

--------------------------------

### React Gantt Component with Data Provision

Source: https://docs.svar.dev/react/gantt/api/actions/provide-data

A React component demonstrating how to use the 'provide-data' action. It fetches task and link data from a server and provides it to the Gantt chart when a 'request-data' event is triggered. This example utilizes React hooks for state management and refs.

```jsx
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useState, useEffect, useRef } from "react";

const server = "https://some-server";

function GanttComponent() {
  const [tasks, setTasks] = useState([]);
  const [links, setLinks] = useState([]);
  const apiRef = useRef();

  useEffect(() => {
    Promise.all([
      fetch(server + "/tasks").then(res => res.json()),
      fetch(server + "/links").then(res => res.json()),
    ]).then(([t, l]) => {
      setTasks(t);
      setLinks(l);
    });
  }, []);

  const init = (api) => {
    api.on("request-data", ev => {
      Promise.all([
        fetch(server + `/tasks/${ev.id}`).then(res => res.json()),
        fetch(server + `/links/${ev.id}`).then(res => res.json()),
      ]).then(([tasks, links]) => {
        api.exec("provide-data", {  
          id: ev.id,  
          data: {  
            tasks,
            links,
          },
        });
      });
    });
  };

  return (
    <Gantt apiRef={apiRef} init={init} tasks={tasks} links={links} />
  );
}

export default GanttComponent;
```

--------------------------------

### Get Gantt Tasks

Source: https://docs.svar.dev/react/gantt/api/overview/restroutes_overview

Retrieves data for all tasks in the Gantt chart.

```HTTP
GET /tasks
```

--------------------------------

### React Gantt Chart with Custom Scales

Source: https://docs.svar.dev/react/gantt/api/properties/scales

Example of using the Gantt component in React, demonstrating how to define and apply custom scales, including conditional CSS classes for specific days.

```javascript
import React from "react";
import { getData } from "../data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const GanttComponent = ({ skinSettings }) => {
  const data = getData();

  const dayStyle = a => {
    const day = a.getDay() === 5 || a.getDay() === 6;
    return day ? "sday" : "";
  };

  const complexScales = [
    { unit: "year", step: 1, format: "yyyy" },
    { unit: "month", step: 2, format: "MMMM yyy" },
    { unit: "week", step: 1, format: "w" },
    { unit: "day", step: 1, format: "d", css: dayStyle },
  ];

  return (
    <Gantt
      {...skinSettings}
      tasks={data.tasks}
      links={data.links}
      scales={complexScales}
      start={new Date(2020, 2, 1)}
      end={new Date(2020, 3, 12)}
      cellWidth={60}
    />
  );
};

export default GanttComponent;

```

--------------------------------

### Update task example using Gantt API

Source: https://docs.svar.dev/react/gantt/api/actions/update-task

Demonstrates how to use the 'update-task' action from the Gantt API to modify a task's properties, specifically clearing the 'text' field in this example.

```javascript
import { getData } from "./common/data";  
import { Gantt } from "wx-react-gantt";  
import "wx-react-gantt/dist/gantt.css";  
import { useRef } from "react";  
  
function MyComponent() {
  const data = getData();  

  const apiRef = useRef();  

  function clearTaskText() {  
    apiRef.current.exec("update-task", {  
      id: 3,  
      task: { text: "" }  
    });  
  }

  return (
    <Gantt  
      apiRef={apiRef}  
      tasks={data.tasks}  
      onShowEditor={clearTaskText}  
    />  
  );
}

export default MyComponent;  
```

--------------------------------

### Access Gantt DataStore in React (JavaScript)

Source: https://docs.svar.dev/react/gantt/api/methods/getStores

Demonstrates how to use the api.getStores() method within a React component to access and log the Gantt's DataStore. It utilizes the useRef hook to get a reference to the Gantt API.

```javascript
import React, { useEffect, useRef } from "react";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { getData } from "./common/data";

const MyComponent = () => {
  const apiRef = useRef();

  useEffect(() => {
    if (apiRef.current) {
      const stores = apiRef.current.getStores();
      console.log("DataStore:", stores);
    }
  }, [apiRef.current]);

  return <Gantt ref={apiRef} tasks={data.tasks} links={data.links} />;
};

export default MyComponent;
```

--------------------------------

### Setting Start and End Dates of the Timescale

Source: https://docs.svar.dev/react/gantt/guides/configuration/configure_scales

Illustrates how to fix the date range of the Gantt timescale by using the 'start' and 'end' properties during initialization. If not set, the Gantt dynamically adjusts based on task dates with offsets.

```javascript
import { getData } from "./data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React, { useRef } from "react";

const App = () => {
  const data = getData();
  const start = new Date(2022, 2, 5);
  const end = new Date(2023, 3, 1);

  return (
    <Gantt
      tasks={data.tasks}
      start={start}
      end={end}
    />
  );
};

export default App;
```

--------------------------------

### Get Specific Task Configuration (JavaScript)

Source: https://docs.svar.dev/react/gantt/api/overview/methods_overview

Retrieves the configuration object for a specific task identified by its ID. Useful for accessing or modifying individual task details.

```javascript
const task = gantt.getTask(taskId);
```

--------------------------------

### React Gantt with Select Editor Configuration

Source: https://docs.svar.dev/react/gantt/api/properties/editorShape

Example of configuring a 'select' type editor field in wx-react-gantt. This snippet shows how to define a 'Type' field with a label for selection.

```javascript
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const data = getData();

const editorShape = [
  {
    key: "Combo",
    type: "select",
    label: "Type",
  },
];

function App() {
  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      columns={data.columns}
      editorShape={editorShape}
    />
  );
}

export default App;
```

--------------------------------

### React Gantt Chart 'expand-scale' Event Handling

Source: https://docs.svar.dev/react/gantt/api/actions/expand-scale

An example of how to set up an event listener for the 'expand-scale' action in a React Gantt chart component using `wx-react-gantt`. It logs the `minWidth` of the scale when the event fires.

```javascript
import { useEffect, useRef } from "react";  
import { getData } from "../data";  
import { Gantt } from "wx-react-gantt";  
import "wx-react-gantt/dist/gantt.css";  
  
const MyGanttComponent = () => {  
  const data = getData();  
  const apiRef = useRef(null);  
  
  useEffect(() => {  
    if (apiRef.current) {  
      apiRef.current.on("expand-scale", (ev) => {  
        console.log("Current scale minWidth", ev.minWidth);  
      });  
    }  
  }, [apiRef.current]);  
  
  return <Gantt apiRef={apiRef} tasks={data.tasks} links={data.links} scales={data.scales} />;  
};  
  
export default MyGanttComponent;  
```

--------------------------------

### Get Reactive State (JavaScript)

Source: https://docs.svar.dev/react/gantt/api/overview/methods_overview

Retrieves the state object containing reactive properties of the Gantt chart. This allows observing changes in Gantt's state.

```javascript
const reactiveState = gantt.getReactiveState();
```

--------------------------------

### RestDataProvider Initialization and Basic Usage

Source: https://docs.svar.dev/react/gantt/guides/working_with_server

Demonstrates how to initialize RestDataProvider with a backend URL and integrate it with the Gantt component to load data.

```APIDOC
## RestDataProvider Initialization and Basic Usage

### Description
This section explains how to set up the `RestDataProvider` service to handle data operations with your backend. It covers initializing the provider with a server URL, loading data using `getData()`, and intercepting events for custom logic.

### Method
Initialization: `new RestDataProvider(url)`
Data Loading: `getData()`
Event Interception: `intercept(event, handler)`
Setting Next Handler: `setNext(provider)`

### Endpoint
N/A (Client-side service)

### Parameters
#### Constructor Parameters
- **url** (string) - Required - The base URL of your backend server.
- **options** (object) - Optional - Configuration options for the provider.
  - **batchURL** (string) - Optional - The relative URL for batch requests.

#### `getData()` Parameters
- **id** (string | number) - Optional - Identifier for specific data requests (e.g., for lazy loading).

### Request Example
```javascript
import React, { useEffect, useRef } from 'react';
import { Gantt } from 'wx-react-gantt';
import { RestDataProvider } from 'wx-gantt-data-provider';

const url = "https://some_backend_url";
const server = new RestDataProvider(url);

const MyComponent = () => {
    const [tasks, setTasks] = useState([]);
    const [links, setLinks] = useState([]);
    const apiRef = useRef(null);

    useEffect(() => {
        server.getData().then(data => {
            setTasks(data.tasks);
            setLinks(data.links);
        });
    }, []);

    useEffect(() => {
        if (apiRef.current) {
            apiRef.current.intercept("update-task", data => {
                data.custom = "custom event";
            });
            apiRef.current.setNext(server);
        }
    }, [apiRef.current]);

    return (
        <Gantt
            tasks={tasks}
            links={links}
            apiRef={apiRef}
        />
    );
};

export default MyComponent;
```

### Response
#### Success Response (from `getData()`)
- **tasks** (array) - An array of task objects.
- **links** (array) - An array of link objects.

#### Response Example
```json
{
  "tasks": [
    {
      "id": 1,
      "text": "Task 1",
      "start_date": "2023-01-01",
      "duration": 5
    }
  ],
  "links": [
    {
      "id": 1,
      "source": 1,
      "target": 2,
      "type": "0"
    }
  ]
}
```
```

--------------------------------

### Customize Toolbar Buttons using defaultToolbarButtons

Source: https://docs.svar.dev/react/gantt/guides/configuration/toolbar

Illustrates customizing the toolbar by filtering the `defaultToolbarButtons` array. This example removes indentation-related buttons from the toolbar, demonstrating how to modify the default set of buttons.

```javascript
import { getData } from "../data";  
import { Gantt, Toolbar, defaultToolbarButtons } from "wx-react-gantt";  
import "wx-react-gantt/dist/gantt.css";  
import { useRef } from "react";  
  
function MyComponent() {  
  const apiRef = useRef();  
  
  const data = getData();  
  
  // remove indentation buttons  
  const items = defaultToolbarButtons.filter(b => {  
    return b.id?.indexOf("indent") === -1;  
  });  
  
  return (  
    <>  
      <Toolbar apiRef={apiRef} items={items} />  
      <Gantt apiRef={apiRef} tasks={data.tasks} />  
    </>
  );
}

export default MyComponent;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.