### Install babel-plugin-import

Source: https://arco.design/react/docs/start

Install the babel-plugin-import package as a development dependency for on-demand loading.

```bash
npm i babel-plugin-import -D
```

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

### Uninstall v1 and Install v2 Packages

Source: https://arco.design/react/docs/migrate_to_v2

To begin the migration, uninstall the old ByteDesign package and install the new ArcoDesign package using npm.

```bash
npm remove @bytedesign/web-react && npm i @arco-design/web-react
```

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

### Install VChart and Arco Theme

Source: https://arco.design/react/docs/vchart

Install VChart and the @visactor/vchart-arco-theme package using npm or yarn.

```bash
# Install VChart
$ npm install @visactor/react-vchart
# Install @visactor/vchart-arco-theme to adapt arco theme
$ npm install @visactor/vchart-arco-theme
```

```bash
# Install VChart
$ yarn add @visactor/react-vchart
# Install @visactor/vchart-arco-theme to adapt arco theme
$ yarn add @visactor/vchart-arco-theme
```

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

### Vertical Steps Example

Source: https://arco.design/react/components/steps

Demonstrates a vertical Steps component with navigation buttons. Use this for sequential processes where vertical space is abundant.

```javascript
import { useState, useRef } from 'react';  
import { Steps, Button, Divider } from '@arco-design/web-react';  
import { IconLeft, IconRight } from '@arco-design/web-react/icon';  
const Step = Steps.Step;  
  
function App() {  
  const [current, setCurrent] = useState(1);  
  
  function renderContent(step) {  
    return (  
      <div  
        style={{  
          width: '100%',  
          height: 272,  
          textAlign: 'center',  
          background: 'var(--color-bg-2)',  
          color: '#C2C7CC',  
        }}  
      >  
        <div style={{ lineHeight: '200px' }}>Step{step} Content</div>  
  
        <div>  
          <Button  
            type='secondary'  
            disabled={current <= 1}  
            onClick={() => setCurrent(current - 1)}  
            style={{ paddingLeft: 8 }}  
          >  
            <IconLeft />  
            Back  
          </Button>  
          <Button  
            disabled={current >= 3}  
            onClick={() => setCurrent(current + 1)}  
            style={{ marginLeft: 20, paddingRight: 8 }}  
            type='primary'  
          >  
            Next  
            <IconRight />  
          </Button>  
        </div>  
      </div>  
    );  
  }  
  
  return (  
    <div  
      style={{  
        display: 'flex',  
        maxWidth: 780,  
        padding: 40,  
        background: 'var(--color-fill-2)',  
      }}  
    >  
      <div  
        style={{  
          background: 'var(--color-bg-2)',  
          padding: 24,  
          height: 272,  
          boxSizing: 'border-box',  
        }}  
      >  
        <Steps direction='vertical' current={current} style={{ width: 170 }}>  
          <Step title='Succeeded' description='This is a description' />  
          <Step title='Processing' description='This is a description' />  
          <Step title='Pending' description='This is a description' />  
        </Steps>  
      </div>  
      <Divider type='vertical' style={{ display: 'block', height: 'auto' }}/>  
      {renderContent(current)}  
    </div>  
  );  
}  
  
export default App;  
```

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

### Basic Select with Options

Source: https://arco.design/react/components/select

Demonstrates how to use the Select component with a predefined list of options for single and multiple selections. Ensure '@arco-design/web-react' is installed.

```javascript
import { Select, Message, Space } from '@arco-design/web-react';
const options = ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen', 'Chengdu', 'Wuhan'];

const App = () => {
  return (
    <Space size='large'>
      <Select
        options={options}
        defaultValue='Beijing'
        placeholder='Select city'
        style={{ width: 154 }}
      />

      <Select
        mode='multiple'
        options={options}
        defaultValue={['Beijing', 'Shanghai']}
        placeholder='Select cities'
        style={{
          width: 345,
        }}
      />
    </Space>
  );
};

export default App;
```

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

### Basic Table Usage

Source: https://arco.design/react/components/table

Demonstrates the fundamental setup for rendering a table with columns and data. Ensure you import `Table` and `TableColumnProps` from '@arco-design/web-react'.

```javascript
import React from 'react';
import { Table, TableColumnProps } from '@arco-design/web-react';

const columns: TableColumnProps[] = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Salary',
    dataIndex: 'salary',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: 'Email',
    dataIndex: 'email',
  },
];
const data = [
  {
    key: '1',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com',
  },
  {
    key: '2',
    name: 'Alisa Ross',
    salary: 25000,
    address: '35 Park Road, London',
    email: 'alisa.ross@example.com',
  },
  {
    key: '3',
    name: 'Kevin Sandra',
    salary: 22000,
    address: '31 Park Road, London',
    email: 'kevin.sandra@example.com',
  },
  {
    key: '4',
    name: 'Ed Hellen',
    salary: 17000,
    address: '42 Park Road, London',
    email: 'ed.hellen@example.com',
  },
  {
    key: '5',
    name: 'William Smith',
    salary: 27000,
    address: '62 Park Road, London',
    email: 'william.smith@example.com',
  },
];

const App = () => {
  return <Table columns={columns} data={data} />;
};

export default App;
```

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

### Spin with Custom Description

Source: https://arco.design/react/components/spin

Customize the loading text using the `tip` prop. This example wraps a Card component with a custom tip.

```javascript
import { Spin, Card, Link } from '@arco-design/web-react';

function App() {
  return (
    <Spin tip='This may take a while...' loading>
      <Card style={{ width: 360 }} title='Delay 500ms' extra={<Link> More </Link>}>
        ByteDance's core product, Toutiao ('Headlines'), is a content platform in China and around
        the world. Toutiao started out as a news recommendation engine and gradually evolved into a
        platform delivering content in various formats.
      </Card>
    </Spin>
  );
}

export default App;
```

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

### Time Formatting Example

Source: https://arco.design/react/components/statistic

Displays a timestamp formatted using dayjs. The `format` prop accepts dayjs format strings.

```javascript
import { Statistic, Grid } from '@arco-design/web-react';
const Row = Grid.Row;
const Col = Grid.Col;

const App = () => {
  return <Statistic title='CreatedTime' value={1554869813383} format='YYYY/MM/DD HH:mm:ss' />;
};

export default App;
```

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

### Nested Drawers

Source: https://arco.design/react/components/drawer

This example shows how to implement multiple drawers stacked on top of each other. A button in the first drawer opens a second, nested drawer.

```javascript
import { useState } from 'react';  
import { Drawer, Button } from '@arco-design/web-react';  

function App() {
  const [visible, setVisible] = useState(false);  
  const [visible2, setVisible2] = useState(false);  
  return (
    <div>
      <Button  
        onClick={() => {
          setVisible(true);
        }}  
        type='primary'
      >
        Open Drawer
      </Button>
      <Drawer  
        width={500}
        title={<span>First Drawer </span>}
        visible={visible}
        onOk={() => {
          setVisible(false);
        }}
        onCancel={() => {
          setVisible(false);
        }}
      >
        <Button  
          onClick={() => {
            setVisible2(true);
          }}  
          type='primary'
          style={{ marginTop: 20 }}
        >
          Open Drawer
        </Button>
      </Drawer>
      <Drawer  
        width={332}
        title={<span>Second Drawer </span>}
        visible={visible2}
        onOk={() => {
          setVisible2(false);
        }}
        onCancel={() => {
          setVisible2(false);
        }}
      >
        <div>Here is an example text.</div>

        <div>Here is an example text.</div>
      </Drawer>
    </div>
  );
}

export default App;  
```

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

### Grid Offset Example

Source: https://arco.design/react/components/grid

Demonstrates how to use the 'offset' prop to create space between columns in a grid layout. Ensure the Grid component is imported.

```jsx
import { Grid } from '@arco-design/web-react';
const Row = Grid.Row;
const Col = Grid.Col;

const App = () => {
  return (
    <div style={{ width: '100%' }}>
      <Row
        className='grid-demo'
        style={{ marginBottom: 16, backgroundColor: 'var(--color-fill-2)' }}
      >
        <Col span={8}>col - 8</Col>
        <Col span={8} offset={8}>
          col - 8 | offset - 8
        </Col>
      </Row>
      <Row
        className='grid-demo'
        style={{ marginBottom: 16, backgroundColor: 'var(--color-fill-2)' }}
      >
        <Col span={6} offset={8}>
          col - 6 | offset - 8
        </Col>
        <Col span={6} offset={4}>
          col - 6 | offset - 4
        </Col>
      </Row>
      <Row className='grid-demo' style={{ backgroundColor: 'var(--color-fill-2)' }}>
        <Col span={12} offset={8}>
          col - 12 | offset - 8
        </Col>
      </Row>
    </div>
  );
};

export default App;
```

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

### Adaptive Long Button Examples

Source: https://arco.design/react/components/button

Shows how to create buttons that automatically adjust their width to fit their container. Useful for full-width actions.

```javascript
import { Button, Space } from '@arco-design/web-react';
import { IconUpload } from '@arco-design/web-react/icon';

const App = () => {
  return (
    <Space
      style={{
        width: 360,
        border: '1px solid var(--color-border)',
        borderRadius: 4,
        padding: 20,
      }}
      direction='vertical'
      size='large'
    >
      <Button type='primary' long>
        Primary
      </Button>
      <Button type='secondary' long>
        Secondary
      </Button>
      <Button type='dashed' long>
        Dashed
      </Button>
      <Button type='default' long>
        Default
      </Button>
      <Button type='text' long>
        Text
      </Button>
    </Space>
  );
};

export default App;
```

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

### Popconfirm Positioning Examples

Source: https://arco.design/react/components/popconfirm

Demonstrates the 12 different positions available for the Popconfirm component. Each position is shown with a corresponding button trigger.

```javascript
import { Popconfirm, Button, Message } from '@arco-design/web-react';  
const props = {  
  title: 'Are you sure you want to delete? ',  
  onOk: () => {  
    Message.info({  
      content: 'ok',  
    });  
  },  
  onCancel: () => {  
    Message.error({  
      content: 'cancel',  
    });  
  },  
};  
  
const App = () => {  
  return (  
    <div  
      style={{  
        position: 'relative',  
        width: 400,  
        height: 300,  
      }}  
    >  
      <Popconfirm focusLock position='tl' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 20,  
            left: 70,  
          }}  
        >  
          TL  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='top' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 20,  
            left: 180,  
          }}  
        >  
          Top  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='tr' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 20,  
            left: 290,  
          }}  
        >  
          TR  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='lt' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 60,  
            left: 10,  
          }}  
        >  
          LT  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='left' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 120,  
            left: 10,  
          }}  
        >  
          Left  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='lb' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 180,  
            left: 10,  
          }}  
        >  
          LB  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='rt' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 60,  
            left: 350,  
          }}  
        >  
          RT  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='right' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 120,  
            left: 350,  
          }}  
        >  
          Right  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='rb' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 180,  
            left: 350,  
          }}  
        >  
          RB  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='bl' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 226,  
            left: 70,  
          }}  
        >  
          BL  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='bottom' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 226,  
            left: 180,  
          }}  
        >  
          Bottom  
        </Button>  
      </Popconfirm>  
      <Popconfirm position='br' {...props}>  
        <Button  
          style={{  
            position: 'absolute',  
            width: 80,  
            top: 226,  
            left: 290,  
          }}  
        >  
          BR  
        </Button>  
      </Popconfirm>  
    </div>  
  );  
};  
  
export default App;  
```

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

### Button Group Examples

Source: https://arco.design/react/components/button

Demonstrates various combinations of buttons within a group, including different types and icon placements. Useful for related actions.

```javascript
import React from 'react';
import { Button, Space } from '@arco-design/web-react';
import {
  IconLeft,
  IconRight,
  IconMore,
  IconStar,
  IconSettings,
  IconMessage,
  IconDown,
} from '@arco-design/web-react/icon';
const ButtonGroup = Button.Group;

const App = () => {
  return (
    <Space size='large' direction='vertical'>
      <Space size='large'>
        <ButtonGroup>
          <Button>Publish</Button>
          <Button icon={<IconDown />} />
        </ButtonGroup>
        <ButtonGroup>
          <Button type='secondary'>Publish</Button>
          <Button type='secondary' icon={<IconMore />} />
        </ButtonGroup>
      </Space>
      <ButtonGroup>
        <Button type='primary'>Publish</Button>
        <Button type='primary' icon={<IconDown />} />
      </ButtonGroup>
      <Space size='large'>
        <ButtonGroup>
          <Button
            type='primary'
            icon={<IconLeft />}
            shape='round'
            style={{ padding: '0 8px' }}
          >
            Prev
          </Button>
          <Button
            type='primary'
            shape='round'
            style={{ padding: '0 8px' }}
          >
            Next
            <IconRight />
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button type='primary' icon={<IconStar />} />
          <Button type='primary' icon={<IconMessage />} />
          <Button type='primary' icon={<IconSettings />} />
        </ButtonGroup>
        <ButtonGroup>
          <Button type='primary' icon={<IconStar />}>
            Favorite
          </Button>
          <Button type='primary' icon={<IconSettings />}>
            Setting
          </Button>
        </ButtonGroup>
      </Space>
    </Space>
  );
};

export default App;
```

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

### Custom Icon Result Example

Source: https://arco.design/react/components/result

Demonstrates how to use the `icon` prop to provide a custom icon for the Result component. This allows for more flexible visual feedback.

```javascript
import { Result, Button } from '@arco-design/web-react';
import { IconFaceSmileFill } from '@arco-design/web-react/icon';

const App = () => {
  return (
    <div>
      <Result
        status={null}
        icon={<IconFaceSmileFill style={{ color: 'rgb(var(--arcoblue-6))' }} />}
        title='Your operation has been performed.'
        extra={<Button type='primary'>Back</Button>}
      ></Result>
    </div>
  );
};

export default App;
```

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

### Loading State Example

Source: https://arco.design/react/components/statistic

Shows how to control the loading state of the Statistic component using the `loading` prop. A switch is provided to toggle the loading status.

```javascript
import { useState } from 'react';
import { Statistic, Switch, Typography } from '@arco-design/web-react';

function App() {
  const [loading, setLoading] = useState(true);
  return (
    <div>
      <div style={{ marginBottom: 24 }}>
        <Switch checked={loading} onChange={setLoading} />
        <Typography.Text style={{ margin: '0 10px' }}>Loading</Typography.Text>
      </div>
      <Statistic title='Downloads' value={125670} groupSeparator loading={loading} />
    </div>
  );
}

export default App;
```

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

### Basic Steps Usage

Source: https://arco.design/react/components/steps

Demonstrates the fundamental implementation of the Steps component with titles for each step.

```javascript
import { Steps, Divider } from '@arco-design/web-react';
const Step = Steps.Step;

const App = () => {
  return (
    <div>
      <Steps current={2} style={{ maxWidth: 780, margin: '0 auto' }}>
        <Step title='Succeeded' />
        <Step title='Processing' />
        <Step title='Pending' />
      </Steps>
      <Divider />
      <div
        style={{
          lineHeight: '140px',
          textAlign: 'center',
          color: '#C9CDD4',
        }}
      >
        Step 2 Content
      </div>
    </div>
  );
};

export default App;
```

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

### Reversing Slider Direction

Source: https://arco.design/react/components/slider

Set `reverse={true}` to swap the start and end points of the slider. This example uses a `Switch` to toggle the reverse state and displays marks for specific values.

```javascript
import { useState } from 'react';
import { Slider, Switch, Typography, Space } from '@arco-design/web-react';
import { IconSound, IconMute } from '@arco-design/web-react/icon';

function App() {
  const [reverse, setReverse] = useState(true);
  return (
    <>
      <Space style={{ marginBottom: 24 }} size={4}>
        <Switch checked={reverse} onChange={setReverse} />
        <Typography.Text>Reversed</Typography.Text>
      </Space>
      <div>
        <Slider
          reverse={reverse}
          showTicks
          max={15}
          defaultValue={10}
          marks={{
            0: '0km',
            5: '5km',
            10: '10km',
            15: '15km',
          }}
          style={{ width: 200 }}
        />
      </div>
    </>
  );
}

export default App;
```

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

### Steps with Descriptions

Source: https://arco.design/react/components/steps

Illustrates adding descriptive text to each step using the `description` prop.

```javascript
import { Steps } from '@arco-design/web-react';
const Step = Steps.Step;

const App = () => {
  return (
    <Steps current={2} style={{ maxWidth: 780, marginBottom: 40 }}>
      <Step title='Succeeded' description='This is a description' />
      <Step title='Processing' description='This is a description' />
      <Step title='Pending' description='This is a description' />
    </Steps>
  );
};

export default App;
```

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

### Countdown Timer Examples

Source: https://arco.design/react/components/statistic

Demonstrates various configurations for the Countdown component, including basic countdown, custom render format, millisecond precision, day formatting, and triggering on finish.

```javascript
import React from 'react';
import { Statistic, Message, Button, Space } from '@arco-design/web-react';

const Countdown = Statistic.Countdown;
const now = Date.now();

function App() {
  const [start, setStart] = React.useState(false);

  const _now = Date.now();

  return (
    <Space direction='vertical' size={40}>
      <Space size={60}>
        <Countdown title='Countdown' value={now + 1000 * 60 * 60 * 2} now={now} />
        <Countdown
          value={now + 1000 * 60 * 60 * 2}
          now={now}
          renderFormat={(_diff, _value) => {
            const minutes = Math.floor(_diff / (1000 * 60));
            const seconds = Math.floor(_diff / 1000);
            let diffTimes = '';
            if (minutes) {
              diffTimes = `${minutes}min 后`;
            } else {
              diffTimes = `${seconds}s 后`;
            }
            return <Statistic title='Countdown renderFormat' value={_value} suffix={diffTimes} />;
          }}
        />
        <Countdown
          title='Milliseconds'
          value={now + 1000 * 60 * 60 * 2}
          format='HH:mm:ss.SSS'
          now={now}
        />
      </Space>
      <Space align='start' size={40}>
        <Countdown
          title='Days'
          value={now + 1000 * 60 * 60 * 24 * 4}
          format='D 天 H 时 m 分 s 秒'
          now={now}
        />
        <div>
          <Countdown
            title='Trigger on finish'
            value={_now + 1000 * 5}
            format='HH:mm:ss.SSS'
            start={start}
            now={_now}
            onFinish={() => {
              Message.info({
                content: 'Finish!',
              });
              setStart(false);
            }}
          />
          <Button
            onClick={() => {
              setStart(true);
            }}
            style={{ display: 'block', marginTop: 10 }}
            type='primary'
          >
            Start
          </Button>
        </div>
      </Space>
    </Space>
  );
}

export default App;
```

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

### Dynamic Loading Tree Example

Source: https://arco.design/react/components/tree

Shows how to implement dynamic loading for tree nodes using the `loadMore` prop. This is useful for large trees where nodes are loaded on demand to improve performance.

```javascript
import React from 'react';
import { Tree } from '@arco-design/web-react';

const TreeNode = Tree.Node;
const defaultTreeData = [
  {
    title: 'Trunk 0-0',
    key: '0-0'
  },
  {
    title: 'Trunk 0-1',
    key: '0-1',
    children: [
      {
        title: 'Branch 0-1-1',
        key: '0-1-1'
      },
    ],
  },
];

function App() {
  const [treeData, setTreeData] = React.useState(defaultTreeData);

  const loadMore = (treeNode) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        treeNode.props.dataRef.children = [
          {
            title: `leaf`,
            key: `${treeNode.props._key}-1`,
            isLeaf: true,
          },
        ];
        setTreeData([...treeData]);
        resolve();
      }, 1000);
    });
  };

  return <Tree defaultSelectedKeys={['node1']} loadMore={loadMore} treeData={treeData}></Tree>;
}

export default App;
```

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

### Install Arco Design React

Source: https://arco.design/react/docs/start

Install the Arco Design React library using npm or yarn. Requires React version 16.8 or higher.

```bash
// npm  
npm i @arco-design/web-react  
  
// yarn  
yarn add @arco-design/web-react
```

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

### Steps with Custom Icons

Source: https://arco.design/react/components/steps

Demonstrates how to replace default step icons with custom ones using the `icon` prop.

```javascript
import { Steps } from '@arco-design/web-react';
import { IconHome, IconLoading, IconThumbUp } from '@arco-design/web-react/icon';
const Step = Steps.Step;

const App = () => {
  return (
    <Steps current={2}>
      <Step icon={<IconHome />} title='Succeeded' description='This is a description' />
      <Step icon={<IconLoading />} title='Processing' description='This is a description' />
      <Step icon={<IconThumbUp />} title='Pending' description='This is a description' />
    </Steps>
  );
};

export default App;
```

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

### Controlled Ellipsis Example

Source: https://arco.design/react/components/typography

Demonstrates how to control ellipsis behavior with various configurations like rows, expandable, suffix, and ellipsis string. This example showcases dynamic updates based on user interactions.

```jsx
import { useState } from 'react';
import {
  Typography,
  Button,
  Switch,
  Input,
  Form,
  Descriptions,
  Space,
} from '@arco-design/web-react';
const defaultText = `A design is a plan or specification for the construction of an object or system or for the  
implementation of an activity or process. A design is a plan or specification for the  
construction of an object or system or for the implementation of an activity or process. `;
const defaultConfig = {
  ellipsisStr: '...',
};

const App = () => {
  const [config, setConfig] = useState(defaultConfig);
  const [rows, setRows] = useState(1);
  const [text, setText] = useState(defaultText);
  const { ellipsis, ellipsisStr, expandable, suffix } = config;
  return (
    <div>
      <Space align='start' size={120}>  
        <Form  
          onValuesChange={(_, values) => setConfig(values)}  
          style={{ width: '400px', }}
          labelCol={{ span: 6, }}
          wrapperCol={{ span: 18, }}
          size='small'
        >  
          <Form.Item label='超出省略' field='ellipsis' triggerPropName='checked'>  
            <Switch />  
          </Form.Item>  
          <Form.Item label='展开/折叠' field='expandable' triggerPropName='checked'>  
            <Switch />  
          </Form.Item>  
          <Form.Item label='省略号' field='ellipsisStr' initialValue={defaultConfig.ellipsisStr}>  
            <Input />  
          </Form.Item>  
          <Form.Item label='suffix' field='suffix'>  
            <Input />  
          </Form.Item>  
          <Form.Item label='省略展示'>  
            <Space size='medium'>  
              <Button onClick={() => setRows(Math.max(1, rows - 1))}> row- </Button>  
              <Button onClick={() => setRows(rows + 1)}> row+ </Button>  
            </Space>  
          </Form.Item>  
          <Form.Item label='文字操作'>  
            <Button onClick={() => setText(text + defaultText)} type='primary'>  
              addText  
            </Button>  
          </Form.Item>  
        </Form>  
        <Descriptions  
          column={1}  
          title='当前配置'  
          data={[  
            ...Object.entries(config).map(([label, value]) => ({  
              label,
              value: String(value),
            })),
            {
              label: 'rows',
              value: rows,
            },
          ]}
          style={{ marginBottom: 20, }}
          labelStyle={{ paddingRight: 36, }}
        />  
      </Space>  

      <div>  
        <Typography.Paragraph  
          ellipsis={  
            ellipsis  
              ? {
                  rows: rows,
                  expandable,
                  suffix,
                  ellipsisStr,
                  wrapper: 'div'
                }
              : undefined
          }
        >
          {text}
        </Typography.Paragraph>
      </div>
    </div>
  );
};

export default App;
```

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

### Implement Remote Search with Debouncing

Source: https://arco.design/react/components/select

This snippet demonstrates how to implement a remote search functionality for the Select component. It uses debouncing with lodash to limit the number of API calls and displays user avatars and names in the search results. Ensure you have lodash installed (`npm install lodash`).

```javascript
import { useState, useRef, useCallback } from 'react';
import { Select, Spin, Avatar } from '@arco-design/web-react';
import debounce from 'lodash/debounce';

function App() {
  const [options, setOptions] = useState([]);
  const [fetching, setFetching] = useState(false);
  const refFetchId = useRef(null);
  const debouncedFetchUser = useCallback(
    debounce((inputValue) => {
      refFetchId.current = Date.now();
      const fetchId = refFetchId.current;
      setFetching(true);
      setOptions([]);
      fetch('https://randomuser.me/api/?results=5')
        .then((response) => response.json())
        .then((body) => {
          if (refFetchId.current === fetchId) {
            const options = body.results.map((user) => ({
              label: (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Avatar size={24} style={{ marginLeft: 6, marginRight: 12 }}>
                    <img alt='avatar' src={user.picture.thumbnail} />
                  </Avatar>
                  {`${user.name.first} ${user.name.last}`}
                </div>
              ),
              value: user.email,
            }));
            setFetching(false);
            setOptions(options);
          }
        });
    }, 500),
    []
  );
  return (
    <Select
      style={{ width: 345 }}
      showSearch
      mode='multiple'
      options={options}
      placeholder='Search by name'
      filterOption={false}
      renderFormat={(option) => {
        return option.children.props.children[1];
      }}
      notFoundContent={
        fetching ? (
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Spin style={{ margin: 12 }} />
          </div>
        ) : null
      }
      onSearch={debouncedFetchUser}
    />
  );
}

export default App;

```

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

### Draggable Tabs with react-dnd

Source: https://arco.design/react/components/tabs

Implement draggable tabs using the react-dnd library. Ensure react-dnd and its HTML5 backend are installed.

```javascript
import React, { useRef, useState } from 'react';
import { Tabs } from '@arco-design/web-react';
import { TabPaneProps } from '@arco-design/web-react/es/Tabs';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import type { Identifier, XYCoord } from 'dnd-core';

const { TabPane } = Tabs;

interface DragItem {
    index: number;
}

interface WrapTabNodeProps {
    index: number;
    moveTabNode: (dragIndex: number, hoverIndex: number) => void;
    children: React.ReactNode;
}

const initTabs: (TabPaneProps & { key: React.Key })[] = [
    { key: 'tab 1', title: 'tab 1', children: 'Content of Tab Pane 1' },
    { key: 'tab 2', title: 'tab 2', children: 'Content of Tab Pane 2' },
    { key: 'tab 3', title: 'tab 3', children: 'Content of Tab Pane 3' }
];

const WrapTabNode = (props: WrapTabNodeProps) => {
    const { index, moveTabNode, children, ...elseProps } = props;

    const ref = useRef<HTMLDivElement>(null);

    const [{ handlerId }, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>({
        accept: 'DND_NODE',
        collect(monitor) {
            return {
                handlerId: monitor.getHandlerId()
            };
        },
        hover(item, monitor) {
            if (!ref.current) {
                return;
            }
            const dragIndex = item.index;
            const hoverIndex = index;

            if (dragIndex === hoverIndex) {
                return;
            }

            const hoverBoundingRect = ref.current?.getBoundingClientRect();
            const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;

            const clientOffset = monitor.getClientOffset();
            const hoverClientX = (clientOffset as XYCoord).x - hoverBoundingRect.left;

            if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
                return;
            }

            if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
                return;
            }

            moveTabNode(dragIndex, hoverIndex);

            item.index = hoverIndex;
        }
    });

    const [, drag] = useDrag({
        type: 'DND_NODE',
        item: () => {
            return { index };
        }
    });

    drag(drop(ref));

    return (
        <div ref={ref} data-handler-id={handlerId} {...elseProps}>
            {children}
        </div>
    );
};

const App = () => {
    const [tabs, setTabs] = useState(initTabs);

    const moveTabNode = (dragIndex: number, hoverIndex: number) =>
        setTabs(prevTabs => {
            const newCards = [...prevTabs];
            newCards.splice(hoverIndex, 0, ...newCards.splice(dragIndex, 1));

            return newCards;
        });

    return (
        <DndProvider backend={HTML5Backend}>
            <Tabs>
                {tabs.map((tabPane, index) => (
                    <TabPane
                        key={tabPane.key}
                        title={
                            <WrapTabNode key={index} index={index} moveTabNode={moveTabNode}>
                                {tabPane.title}
                            </WrapTabNode>
                        }
                    >
                        {tabPane.children}
                    </TabPane>
                ))}
            </Tabs>
        </DndProvider>
    );
};

export default App;

```

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

### CSS for Menu Demo

Source: https://arco.design/react/components/menu

Basic CSS styling for the menu demo container, setting dimensions and background color.

```css
.menu-demo {
  box-sizing: border-box;
  width: 100%;
  padding: 40px;
  background-color: var(--color-neutral-2);
}

.menu-demo .arco-menu-inner {
  overflow-y: auto;
}
```

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

### Success Result Example

Source: https://arco.design/react/components/result

Displays a success status with a title, subtitle, and action buttons. Use this when an operation has completed successfully.

```javascript
import { Result, Button } from '@arco-design/web-react';

const App = () => {
  return (
    <div>
      <Result
        status='success'
        title='Success message'
        subTitle='This is a success description.'
        extra={[
          <Button key='again' type='secondary' style={{ margin: '0 16px' }}>
            Again
          </Button>,
          <Button key='back' type='primary'>
            Back
          </Button>,
        ]}
      ></Result>
    </div>
  );
};

export default App;
```

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

### Basic Text Area

Source: https://arco.design/react/components/input

Demonstrates the basic usage of the TextArea component for multi-line input. Includes a disabled state example.

```jsx
import { Input, Space } from '@arco-design/web-react';
const TextArea = Input.TextArea;

const App = () => {
  return (
    <Space wrap>
      <TextArea placeholder='Enter something' style={{ minHeight: 64, width: 350 }} />
      <TextArea defaultValue='Disabled' style={{ minHeight: 64, width: 350 }} disabled />
    </Space>
  );
};

export default App;
```

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

### Form with Basic Operations

Source: https://arco.design/react/components/form

Demonstrates creating a form instance using `Form.useForm` and performing operations like submitting, resetting, filling, and validating fields. Use this for standard form interactions in functional components.

```javascript
import { Form, Input, Button, InputNumber } from '@arco-design/web-react';
const FormItem = Form.Item;

function App() {
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      style={{ width: 600 }}
      initialValues={{ name: 'admin' }}
      autoComplete='off'
      onValuesChange={(v, vs) => {
        console.log(v, vs);
      }}
      onSubmit={(v) => {
        console.log(v);
      }}
    >
      <FormItem label='Username' field='name' rules={[{ required: true }]}>
        <Input placeholder='please enter your username' />
      </FormItem>
      <FormItem
        label='Age'
        field='age'
        rules={[{ required: true, type: 'number', min: 0, max: 99 }]
      }>
        <InputNumber placeholder='please enter your age' />
      </FormItem>
      <FormItem wrapperCol={{ offset: 5 }}>
        <Button type='primary' htmlType='submit' style={{ marginRight: 24 }}>
          Submit
        </Button>
        <Button
          style={{ marginRight: 24 }}
          onClick={() => {
            form.resetFields();
          }}
        >
          Reset
        </Button>
        <Button
          type='text'
          onClick={() => {
            form.setFieldsValue({
              name: 'admin',
              age: 11,
            });
          }}
        >
          Fill Form
        </Button>


        <Button
          type='text'
          onClick={() => {
            // 仅校验值，不会有 UI 表现
            form.validate({validateOnly: true}).then(() => {
              console.log('pass');
            }).catch(e => {

              console.log(e.errors)
            });

          }}
        >
          validateOnly
        </Button>
      </FormItem>
    </Form>
  );
}

export default App;
```

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

### Spin with Different Sizes

Source: https://arco.design/react/components/spin

Set the `size` prop to control the dimensions of the loading indicator. This example demonstrates three different sizes.

```jsx
import { Spin, Space } from '@arco-design/web-react';  
  
const App = () => {  
  return (  
    <Space size={40}>  
      <Spin size={20} />  
      <Spin size={30} />  
      <Spin size={40} />  
    </Space>  
  );
};

export default App;  


```

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

### Spin with Custom Indicator

Source: https://arco.design/react/components/spin

Specify a custom icon as the loading indicator using the `icon` prop. This example uses `IconLoading` from `@arco-design/web-react/icon`.

```jsx
import { Spin, Card, Link } from '@arco-design/web-react';  
import { IconLoading } from '@arco-design/web-react/icon';  
  
function App() {  
  return (  
    <Spin loading={true} size={30} icon={<IconLoading />}>  
      <Card  
        style={{ width: 360, }}  
        title='Arco Card'  
        extra={<Link> More </Link>}  
      >  
        ByteDance's core product, Toutiao ('Headlines'), is a content platform in China and around  
        the world. Toutiao started out as a news recommendation engine and gradually evolved into a  
        platform delivering content in various formats.  
      </Card>  
    </Spin>  
  );
}

export default App;  


```

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

### Responsive Grid Layout Example

Source: https://arco.design/react/components/grid

Demonstrates a responsive grid layout using the Grid component. Configure column counts for different screen sizes (xs, sm, md, lg, xl, xxl) and set column and row gaps. The GridItem can also have responsive span and suffix properties.

```jsx
import { useState } from 'react';
import { Grid, Switch, Typography } from '@arco-design/web-react';

const { GridItem } = Grid;

const App = () => {
  return (
    <div style={{ width: '100%' }}>
        <Grid cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }} colGap={12} rowGap={16} className='grid-responsive-demo'>
            <GridItem className='demo-item'>item</GridItem>
            <GridItem className='demo-item'>item</GridItem>
            <GridItem className='demo-item'>item</GridItem>
            <GridItem className='demo-item'>item</GridItem>
            <GridItem className='demo-item'>item</GridItem>
            <GridItem className='demo-item'>item</GridItem>
            <GridItem className='demo-item' span={{ xl: 4, xxl: 6 }} suffix>
                suffix
            </GridItem>
        </Grid>
    </div>
  );
};

export default App;
```

```css
.grid-responsive-demo .demo-item,
.grid-responsive-demo .demo-suffix {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
.grid-responsive-demo .demo-item:nth-child(2n) {
  background-color: rgba(var(--arcoblue-6), 0.9);
}
.grid-responsive-demo .demo-item:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
```

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

### 404 Not Found Result Example

Source: https://arco.design/react/components/result

Shows a 404 Not Found status with a subtitle and action buttons. Use this when the requested page or resource cannot be found.

```javascript
import { Result, Button } from '@arco-design/web-react';

const App = () => {
  return (
    <div>
      <Result
        status='404'
        subTitle='Whoops, that page is gone. '
        extra={[
          <Button key='again' style={{ margin: '0 16px' }}>
            Again
          </Button>,
          <Button key='back' type='primary'>
            Back
          </Button>,
        ]}
      ></Result>
    </div>
  );
};

export default App;
```