### Install React Vant

Source: https://context7.com/3lang3/react-vant/llms.txt

Instructions for installing the React Vant library using npm, yarn, or pnpm. This is the initial step to integrate the library into your React project.

```bash
# Install via npm
npm i react-vant

# Or via yarn
yarn add react-vant

# Or via pnpm
pnpm add react-vant
```

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

### React Vant Button Component Examples

Source: https://context7.com/3lang3/react-vant/llms.txt

Demonstrates various configurations and states of the React Vant Button component. Includes examples for different types, sizes, shapes, loading states, plain styles, button groups, custom colors, and block elements.

```jsx
import React from 'react';
import { Button } from 'react-vant';

function ButtonDemo() {
  const [loading, setLoading] = React.useState(false);

  const handleClick = async () => {
    setLoading(true);
    await new Promise(resolve => setTimeout(resolve, 2000));
    setLoading(false);
  };

  return (
    <div>
      {/* Button Types */}
      <Button type="primary">Primary</Button>
      <Button type="info">Info</Button>
      <Button type="warning">Warning</Button>
      <Button type="danger">Danger</Button>

      {/* Button Sizes */}
      <Button type="primary" size="large">Large</Button>
      <Button type="primary" size="small">Small</Button>
      <Button type="primary" size="mini">Mini</Button>

      {/* Button Shapes */}
      <Button type="primary" round>Round Button</Button>
      <Button type="primary" square>Square Button</Button>

      {/* Loading State */}
      <Button type="primary" loading={loading} onClick={handleClick}>
        Submit
      </Button>
      <Button type="primary" loading loadingText="Loading...">
        Loading
      </Button>

      {/* Plain and Hairline */}
      <Button type="primary" plain>Plain</Button>
      <Button type="primary" plain hairline>Hairline</Button>

      {/* Button Group */}
      <Button.Group type="primary" round>
        <Button>Option A</Button>
        <Button>Option B</Button>
        <Button>Option C</Button>
      </Button.Group>

      {/* Custom Color */}
      <Button color="#7232dd">Purple</Button>
      <Button color="linear-gradient(to right, #ff6034, #ee0a24)">Gradient</Button>

      {/* Block Button */}
      <Button type="primary" block>Block Element</Button>
    </div>
  );
}

```

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

### React Vant Input Component Examples

Source: https://context7.com/3lang3/react-vant/llms.txt

This snippet showcases various functionalities of the React Vant Input component. It includes examples for basic input, clearable inputs, different input types (tel, password, number), inputs with prefix and suffix content, character counting with limits, multi-line text areas with auto-sizing and word limits, disabled and readonly states, and controlling the input via refs.

```jsx
import React, { useState, useRef } from 'react';
import { Input, Cell, Button, Toast } from 'react-vant';

function InputDemo() {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);

  return (
    <div>
      {/* Basic Input */}
      <Cell>
        <Input
          value={value}
          onChange={setValue}
          placeholder="Enter text"
        />
      </Cell>

      {/* With Clear Button */}
      <Cell>
        <Input
          placeholder="Clearable input"
          clearable
          clearTrigger="always"
        />
      </Cell>

      {/* Input Types */}
      <Cell>
        <Input type="tel" placeholder="Phone number" />
      </Cell>
      <Cell>
        <Input type="password" placeholder="Password" />
      </Cell>
      <Cell>
        <Input type="number" placeholder="Number only" />
      </Cell>

      {/* With Prefix and Suffix */}
      <Cell>
        <Input
          prefix="$"
          suffix=".00"
          placeholder="Amount"
          align="right"
        />
      </Cell>
      <Cell>
        <Input
          prefix={<span>📱</span>}
          suffix={<Button size="small" type="primary">Send</Button>}
          placeholder="Verification code"
        />
      </Cell>

      {/* Max Length with Counter */}
      <Cell>
        <Input
          placeholder="Max 20 characters"
          maxLength={20}
          onOverlimit={() => Toast.info('Max length reached')}
        />
      </Cell>

      {/* Text Area */}
      <Cell>
        <Input.TextArea
          placeholder="Multi-line input"
          rows={3}
        />
      </Cell>

      {/* Auto-sizing Text Area */}
      <Cell>
        <Input.TextArea
          placeholder="Auto-resize height"
          autoSize={{ minHeight: 50, maxHeight: 150 }}
        />
      </Cell>

      {/* With Word Limit */}
      <Cell>
        <Input.TextArea
          placeholder="With word count"
          maxLength={100}
          showWordLimit
        />
      </Cell>

      {/* Custom Word Limit Display */}
      <Cell>
        <Input.TextArea
          placeholder="Custom counter"
          showWordLimit={({ currentCount }) => (
            <span style={{ color: currentCount > 50 ? 'red' : 'inherit' }}>
              {currentCount} chars
            </span>
          )}
        />
      </Cell>

      {/* Disabled and Readonly */}
      <Cell>
        <Input value="Readonly" readOnly />
      </Cell>
      <Cell>
        <Input value="Disabled" disabled />
      </Cell>

      {/* Ref Methods */}
      <Cell>
        <Input ref={inputRef} placeholder="With ref" />
      </Cell>
      <Button onClick={() => inputRef.current?.focus()}>Focus</Button>
      <Button onClick={() => inputRef.current?.clear()}>Clear</Button>
    </div>
  );
}

```

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

### Basic React Vant App Setup

Source: https://context7.com/3lang3/react-vant/llms.txt

A simple React component demonstrating the basic usage of React Vant components, specifically the Button and Toast. It shows how to import and use components and trigger a toast message on button click.

```jsx
import React from 'react';
import { Button, Toast } from 'react-vant';

function App() {
  return (
    <Button type="primary" onClick={() => Toast.info('Hello React Vant!')}>
      Click Me
    </Button>
  );
}

export default App;
```

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

### React Vant Dialog Component Examples

Source: https://context7.com/3lang3/react-vant/llms.txt

Demonstrates various ways to use the Dialog component in React Vant, including alert, confirm, custom content, and component-based usage. It requires 'react' and 'react-vant' libraries.

```jsx
import React, { useState } from 'react';
import { Dialog, Button, Cell, Input } from 'react-vant';

function DialogDemo() {
  const [visible, setVisible] = useState(false);

  // Alert Dialog
  const showAlert = () => {
    Dialog.alert({
      title: 'Alert Title',
      message: 'This is an alert message',
    }).then(() => {
      console.log('Alert confirmed');
    });
  };

  // Confirm Dialog
  const showConfirm = async () => {
    try {
      await Dialog.confirm({
        title: 'Confirm Action',
        message: 'Are you sure you want to proceed?',
      });
      console.log('User confirmed');
    } catch {
      console.log('User cancelled');
    }
  };

  // Round Button Theme
  const showRoundDialog = () => {
    Dialog.confirm({
      title: 'Round Buttons',
      message: 'Dialog with round button style',
      theme: 'round-button',
    });
  };

  // Custom Content
  const showCustomDialog = () => {
    Dialog.show({
      title: 'Custom Content',
      message: (
        <div style={{ padding: 16 }}>
          <p>You can put any React content here</p>
          <img
            src="https://img.yzcdn.cn/vant/apple-3.jpg"
            alt="apple"
            style={{ width: '100%', borderRadius: 8 }}
          />
        </div>
      ),
    });
  };

  // Async Close with Loading
  const showAsyncDialog = () => {
    Dialog.confirm({
      title: 'Async Operation',
      message: 'This will simulate an async action',
      onConfirm: async () => {
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 2000));
        console.log('Async operation completed');
      },
    });
  };

  // With Close Icon
  const showCloseableDialog = () => {
    Dialog.alert({
      title: 'Closeable Dialog',
      message: 'Click the X to close',
      closeable: true,
      showConfirmButton: false,
    });
  };

  // Component-based Usage
  return (
    <div>
      <Cell title="Alert Dialog" isLink onClick={showAlert} />
      <Cell title="Confirm Dialog" isLink onClick={showConfirm} />
      <Cell title="Round Theme" isLink onClick={showRoundDialog} />
      <Cell title="Custom Content" isLink onClick={showCustomDialog} />
      <Cell title="Async Close" isLink onClick={showAsyncDialog} />
      <Cell title="With Close Icon" isLink onClick={showCloseableDialog} />

      {/* Component Usage */}
      <Cell title="Component Dialog" isLink onClick={() => setVisible(true)} />

      <Dialog
        visible={visible}
        title="Component Dialog"
        showCancelButton
        onConfirm={() => {
          console.log('Confirmed');
          setVisible(false);
        }}
        onCancel={() => setVisible(false)}
      >
        <div style={{ padding: 16 }}>
          <p>This dialog uses component syntax</p>
        </div>
      </Dialog>
    </div>
  );
}

```

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

### React Vant Toast Component Examples

Source: https://context7.com/3lang3/react-vant/llms.txt

Demonstrates various functionalities of the React Vant Toast component, including basic message types, loading indicators, dynamic updates, custom positioning, custom icons, and handling multiple toasts. It utilizes React and the react-vant library.

```jsx
import React from 'react';
import { Toast, Button, Cell } from 'react-vant';

function ToastDemo() {
  // Basic Toast Types
  const showTextToast = () => Toast.info('This is a text message');
  const showSuccessToast = () => Toast.success('Operation successful');
  const showFailToast = () => Toast.fail('Operation failed');

  // Loading Toast
  const showLoadingToast = () => {
    const toast = Toast.loading({
      message: 'Loading...', 
      forbidClick: true,
      duration: 0, // Won't auto-close
    });

    // Simulate async operation
    setTimeout(() => {
      Toast.clear();
      Toast.success('Completed!');
    }, 2000);
  };

  // Dynamic Update
  const showDynamicToast = () => {
    let countdown = 3;
    const toast = Toast.info({
      message: `Closing in ${countdown} seconds`,
      duration: 3000,
    });

    const timer = setInterval(() => {
      countdown--;
      if (countdown > 0) {
        toast.config({ message: `Closing in ${countdown} seconds` });
      } else {
        clearInterval(timer);
      }
    }, 1000);
  };

  // Custom Position
  const showTopToast = () => Toast.info({ message: 'Top position', position: 'top' });
  const showBottomToast = () => Toast.info({ message: 'Bottom position', position: 'bottom' });

  // Custom Icon
  const showCustomIconToast = () => {
    Toast.info({
      message: 'Custom icon',
      icon: <span style={{ fontSize: 36 }}>🎉</span>,
    });
  };

  // Multiple Toasts (enable multiple mode first)
  const showMultipleToasts = () => {
    Toast.allowMultiple();
    Toast.info('First toast');
    setTimeout(() => Toast.success('Second toast'), 500);
    setTimeout(() => Toast.fail('Third toast'), 1000);
  };

  // Global Configuration
  const setGlobalConfig = () => {
    Toast.setDefaultOptions({ duration: 5000 });
    Toast.setDefaultOptions('loading', { forbidClick: true });
  };

  return (
    <div>
      <Cell title="Text Toast" isLink onClick={showTextToast} />
      <Cell title="Success Toast" isLink onClick={showSuccessToast} />
      <Cell title="Fail Toast" isLink onClick={showFailToast} />
      <Cell title="Loading Toast" isLink onClick={showLoadingToast} />
      <Cell title="Dynamic Update" isLink onClick={showDynamicToast} />
      <Cell title="Top Position" isLink onClick={showTopToast} />
      <Cell title="Custom Icon" isLink onClick={showCustomIconToast} />
    </div>
  );
}

```

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

### React Vant Cell Component Examples

Source: https://context7.com/3lang3/react-vant/llms.txt

Demonstrates various ways to use the React Vant Cell component, including basic usage, with icons, as clickable links, in card style, different sizes, centered content, and custom content. It utilizes React and the react-vant library.

```jsx
import React from 'react';
import { Cell, Toast } from 'react-vant';
import { Arrow, LocationO, PhoneO, SettingO } from '@react-vant/icons';

function CellDemo() {
  return (
    <div>
      {/* Basic Usage */}
      <Cell.Group>
        <Cell title="Cell Title" />
        <Cell title="Cell Title" value="Content" />
        <Cell title="Cell Title" value="Content" label="Description" />
      </Cell.Group>

      {/* With Icon */}
      <Cell.Group title="With Icons">
        <Cell title="Location" icon={<LocationO />} />
        <Cell title="Phone" icon={<PhoneO />} value="+1 234 567 890" />
        <Cell title="Settings" icon={<SettingO />} isLink />
      </Cell.Group>

      {/* Clickable with Arrow */}
      <Cell.Group title="Navigation">
        <Cell title="Settings" isLink onClick={() => Toast.info('Settings')} />
        <Cell title="Profile" isLink arrowDirection="down" />
        <Cell title="Back" isLink arrowDirection="left" />
      </Cell.Group>

      {/* Card Style (Inset) */}
      <Cell.Group title="Card Style" inset>
        <Cell title="Item 1" value="Value" />
        <Cell title="Item 2" value="Value" />
        <Cell title="Item 3" value="Value" />
      </Cell.Group>

      {/* Large Size */}
      <Cell.Group title="Large Size">
        <Cell size="large" title="Large Cell" value="Content" />
        <Cell size="large" title="Large Cell" label="With description" />
      </Cell.Group>

      {/* Centered Content */}
      <Cell.Group>
        <Cell
          center
          title="Centered"
          label="With multi-line label that may wrap to multiple lines"
          value="Value"
        />
      </Cell.Group>

      {/* Custom Content */}
      <Cell.Group title="Custom Content">
        <Cell
          title="User"
          icon={
            <img
              src="https://img.yzcdn.cn/vant/cat.jpeg"
              alt="avatar"
              style={{ width: 40, height: 40, borderRadius: 20 }}
            />
          }
          value="Online"
          label="Last seen: 5 min ago"
        />
      </Cell.Group>

      {/* Only Value (Left Aligned) */}
      <Cell value="Only value content" />
    </div>
  );
}

```

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

### Import and Render a Button Component in React

Source: https://github.com/3lang3/react-vant/blob/main/README.md

This snippet demonstrates how to import and render a basic Button component from the react-vant library within a React application. It assumes you have react-dom and react-vant installed. The code renders a default button to the DOM.

```jsx
import ReactDOM from 'react-dom';
import { Button } from 'react-vant';

function App() {
  return <Button>Default Button</Button>;
}

ReactDOM.render(<App />, mountNode);
```

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

### Use Window Size Hook in React

Source: https://context7.com/3lang3/react-vant/llms.txt

The `useWindowSize` hook from React Vant allows you to easily get the current width and height of the browser window. It updates automatically when the window is resized. No external dependencies are required.

```jsx
import React from 'react';
import { hooks } from 'react-vant';

function WindowSizeDemo() {
  const { width, height } = hooks.useWindowSize();
  return <div>Window: {width}x{height}</div>;
}
```

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

### React Vant Image Component Examples

Source: https://context7.com/3lang3/react-vant/llms.txt

This snippet showcases the react-vant Image component, highlighting its features such as different fill modes, rounded corners, lazy loading, custom loading/error states, and event handling. It demonstrates how to enhance native image display with additional functionalities.

```jsx
import React from 'react';
import { Image, Space } from 'react-vant';

function ImageDemo() {
  const src = 'https://img.yzcdn.cn/vant/cat.jpeg';
  const errorSrc = 'https://invalid-url.jpg';

  return (
    <div>
      {/* Basic Image */}
      <Image src={src} width={100} height={100} />

      {/* Fill Modes */}
      <Space wrap>
        <Image src={src} width={100} height={100} fit="contain" />
        <Image src={src} width={100} height={100} fit="cover" />
        <Image src={src} width={100} height={100} fit="fill" />
        <Image src={src} width={100} height={100} fit="none" />
        <Image src={src} width={100} height={100} fit="scale-down" />
      </Space>

      {/* Round Image */}
      <Image src={src} width={100} height={100} round />

      {/* With Radius */}
      <Image src={src} width={100} height={100} radius={10} />

      {/* Lazy Load */}
      <Image src={src} width={100} height={100} lazyload />

      {/* Loading State */}
      <Image
        src={src}
        width={100}
        height={100}
        showLoading
        loadingIcon={<span>Loading...</span>}
      />

      {/* Error State */}
      <Image
        src={errorSrc}
        width={100}
        height={100}
        showError
        errorIcon={<span>Failed</span>}
      />

      {/* Event Handlers */}
      <Image
        src={src}
        width={100}
        height={100}
        onClick={() => console.log('Image clicked')}
        onLoad={() => console.log('Image loaded')}
        onError={() => console.log('Image failed to load')}
      />
    </div>
  );
}

```

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

### Tabs Component Examples in React

Source: https://context7.com/3lang3/react-vant/llms.txt

Demonstrates various functionalities of the Tabs component, including basic usage, different tab types (card, capsule), badges, scrollable tabs, disabled tabs, sticky positioning, swipe gestures, scrollspy navigation, and custom colors. It requires React and react-vant.

```jsx
import React, { useState, useRef } from 'react';
import { Tabs, Toast } from 'react-vant';

function TabsDemo() {
  const [active, setActive] = useState(0);
  const tabsRef = useRef(null);

  return (
    <div>
      {/* Basic Tabs */}
      <Tabs active={active} onChange={setActive}>
        <Tabs.TabPane title="Tab 1">Content 1</Tabs.TabPane>
        <Tabs.TabPane title="Tab 2">Content 2</Tabs.TabPane>
        <Tabs.TabPane title="Tab 3">Content 3</Tabs.TabPane>
      </Tabs>

      {/* Tab Types */}
      <Tabs type="card">
        <Tabs.TabPane title="Card 1">Card Content 1</Tabs.TabPane>
        <Tabs.TabPane title="Card 2">Card Content 2</Tabs.TabPane>
      </Tabs>

      <Tabs type="capsule">
        <Tabs.TabPane title="Capsule 1">Capsule Content 1</Tabs.TabPane>
        <Tabs.TabPane title="Capsule 2">Capsule Content 2</Tabs.TabPane>
      </Tabs>

      {/* With Badge */}
      <Tabs>
        <Tabs.TabPane title="Messages" badge={{ content: 5 }}>
          Messages content
        </Tabs.TabPane>
        <Tabs.TabPane title="Notifications" badge={{ dot: true }}>
          Notifications content
        </Tabs.TabPane>
        <Tabs.TabPane title="Settings">Settings content</Tabs.TabPane>
      </Tabs>

      {/* Scrollable Tabs (more than 5) */}
      <Tabs>
        {[1, 2, 3, 4, 5, 6, 7, 8].map(item => (
          <Tabs.TabPane key={item} title={`Tab ${item}`}>
            Content {item}
          </Tabs.TabPane>
        ))}
      </Tabs>

      {/* Disabled Tab */}
      <Tabs>
        <Tabs.TabPane title="Active">Active content</Tabs.TabPane>
        <Tabs.TabPane title="Disabled" disabled>Disabled content</Tabs.TabPane>
        <Tabs.TabPane title="Active 2">Active 2 content</Tabs.TabPane>
      </Tabs>

      {/* Sticky Tabs */}
      <Tabs sticky swipeable>
        {[1, 2, 3, 4].map(item => (
          <Tabs.TabPane key={item} title={`Sticky ${item}`}>
            <div style={{ height: 300 }}>Scrollable content {item}</div>
          </Tabs.TabPane>
        ))}
      </Tabs>

      {/* Scrollspy Navigation */}
      <Tabs
        ref={tabsRef}
        sticky
        scrollspy={{ autoFocusLast: true, reachBottomThreshold: 50 }}
      >
        {[1, 2, 3, 4].map(item => (
          <Tabs.TabPane key={item} title={`Section ${item}`}>
            <div style={{ height: '50vh' }}>Section {item} content</div>
          </Tabs.TabPane>
        ))}
      </Tabs>

      {/* Custom Tab Color */}
      <Tabs color="#07c160" titleActiveColor="#07c160">
        <Tabs.TabPane title="Custom 1">Content 1</Tabs.TabPane>
        <Tabs.TabPane title="Custom 2">Content 2</Tabs.TabPane>
      </Tabs>
    </div>
  );
}

```

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

### React Vant Checkbox Component Examples

Source: https://context7.com/3lang3/react-vant/llms.txt

This snippet demonstrates various functionalities of the react-vant Checkbox component, including basic toggling, group selection, custom styling, and toggle-all features. It utilizes React hooks like useState and useRef for managing component state and references.

```jsx
import React, { useState, useRef } from 'react';
import { Checkbox, Cell, Button } from 'react-vant';

function CheckboxDemo() {
  const [checked, setChecked] = useState(false);
  const [groupValue, setGroupValue] = useState(['a']);
  const groupRef = useRef(null);

  return (
    <div>
      {/* Basic Checkbox */}
      <Checkbox checked={checked} onChange={setChecked}>
        Basic Checkbox
      </Checkbox>

      {/* Default Checked */}
      <Checkbox defaultChecked>Default Checked</Checkbox>

      {/* Disabled State */}
      <Checkbox disabled>Disabled</Checkbox>
      <Checkbox disabled defaultChecked>Disabled Checked</Checkbox>

      {/* Custom Shape */}
      <Checkbox shape="square">Square Shape</Checkbox>

      {/* Custom Color */}
      <Checkbox checkedColor="#07c160">Custom Color</Checkbox>

      {/* Custom Size */}
      <Checkbox iconSize="24px">Large Icon</Checkbox>

      {/* Label Position */}
      <Checkbox labelPosition="left">Label on Left</Checkbox>

      {/* Disable Label Click */}
      <Checkbox labelDisabled>Only icon is clickable</Checkbox>

      {/* Checkbox Group */}
      <Checkbox.Group value={groupValue} onChange={setGroupValue}>
        <Checkbox name="a">Option A</Checkbox>
        <Checkbox name="b">Option B</Checkbox>
        <Checkbox name="c">Option C</Checkbox>
      </Checkbox.Group>
      <p>Selected: {groupValue.join(', ')}</p>

      {/* Horizontal Group */}
      <Checkbox.Group direction="horizontal" defaultValue={['x']}>
        <Checkbox name="x">X</Checkbox>
        <Checkbox name="y">Y</Checkbox>
        <Checkbox name="z">Z</Checkbox>
      </Checkbox.Group>

      {/* Max Selection */}
      <Checkbox.Group max={2} defaultValue={['1']}>
        <Checkbox name="1">Option 1</Checkbox>
        <Checkbox name="2">Option 2</Checkbox>
        <Checkbox name="3">Option 3</Checkbox>
      </Checkbox.Group>

      {/* Toggle All */}
      <Checkbox.Group ref={groupRef}>
        <Checkbox name="item1">Item 1</Checkbox>
        <Checkbox name="item2">Item 2</Checkbox>
        <Checkbox name="item3">Item 3</Checkbox>
      </Checkbox.Group>
      <Button onClick={() => groupRef.current?.toggleAll(true)}>Check All</Button>
      <Button onClick={() => groupRef.current?.toggleAll(false)}>Uncheck All</Button>
      <Button onClick={() => groupRef.current?.toggleAll()}>Toggle All</Button>

      {/* With Cell */}
      <Cell.Group>
        <Checkbox.Group>
          {['a', 'b', 'c'].map(name => (
            <Cell key={name} clickable title={`Option ${name.toUpperCase()}`}>
              <Checkbox name={name} />
            </Cell>
          ))}
        </Checkbox.Group>
      </Cell.Group>
    </div>
  );
}

```

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

### Use Countdown Hook in React

Source: https://context7.com/3lang3/react-vant/llms.txt

The `useCountDown` hook provides functionality for creating countdown timers. It allows starting, pausing, and resetting the timer, and can execute a callback function upon completion. It takes an options object with `time` and `onFinish` properties.

```jsx
import React from 'react';
import { hooks, Button } from 'react-vant';

function CountDownDemo() {
  const { current, start, pause, reset } = hooks.useCountDown({
    time: 60 * 1000, // 60 seconds
    onFinish: () => console.log('Countdown finished'),
  });

  return (
    <div>
      <p>Time left: {current.seconds}s</p>
      <Button onClick={start}>Start</Button>
      <Button onClick={pause}>Pause</Button>
      <Button onClick={reset}>Reset</Button>
    </div>
  );
}
```

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

### Use Mount Hook in React

Source: https://context7.com/3lang3/react-vant/llms.txt

The `useMount` hook allows you to run a callback function exactly once when the component mounts. It's a convenient alternative to `useEffect` with an empty dependency array for mount-only logic.

```jsx
import React from 'react';
import { hooks } from 'react-vant';

function MountDemo() {
  hooks.useMount(() => {
    console.log('Component mounted');
  });
  return <div>Check console for mount message</div>;
}
```

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

### Basic Swiper with Autoplay in React

Source: https://context7.com/3lang3/react-vant/llms.txt

Demonstrates a basic implementation of the Swiper component with an autoplay feature. It cycles through a list of images automatically. Requires React and react-vant libraries.

```jsx
import React from 'react';
import { Swiper, Image } from 'react-vant';

function SwiperDemo() {
  const images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
  ];

  return (
    <Swiper autoplay={3000}>
      {images.map((image, index) => (
        <Swiper.Item key={index}>
          <Image src={image} fit="cover" style={{ height: 150 }} />
        </Swiper.Item>
      ))}
    </Swiper>
  );
}

```

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

### React Vant ActionSheet Component Implementation

Source: https://context7.com/3lang3/react-vant/llms.txt

Demonstrates the implementation of the ActionSheet component in React Vant. It showcases how to manage the visibility of the ActionSheet, define different types of actions (basic, with subnames, with states), and handle user selections or cancellations. This snippet requires React and react-vant libraries.

```jsx
import React, { useState } from 'react';
import { ActionSheet, Cell, Toast } from 'react-vant';

function ActionSheetDemo() {
  const [visible, setVisible] = useState(false);
  const [customVisible, setCustomVisible] = useState(false);

  // Basic Actions
  const basicActions = [
    { name: 'Option 1' },
    { name: 'Option 2' },
    { name: 'Option 3' },
  ];

  // Actions with Subnames
  const detailedActions = [
    { name: 'Option 1', subname: 'Description for option 1' },
    { name: 'Option 2', subname: 'Description for option 2' },
    { name: 'Option 3', subname: 'Description for option 3' },
  ];

  // Actions with States
  const stateActions = [
    { name: 'Normal Option' },
    { name: 'Colored Option', color: '#ee0a24' },
    { name: 'Disabled Option', disabled: true },
    { name: 'Loading Option', loading: true },
  ];

  return (
    <div>
      {/* Basic ActionSheet */}
      <Cell title="Basic ActionSheet" isLink onClick={() => setVisible(true)} />
      <ActionSheet
        visible={visible}
        actions={basicActions}
        onSelect={(action, index) => {
          Toast.info(`Selected: ${action.name}`);
          setVisible(false);
        }}
        onCancel={() => setVisible(false)}
        cancelText="Cancel"
      />

      {/* With Description */}
      <ActionSheet
        visible={false}
        description="Please select an option"
        actions={detailedActions}
        cancelText="Cancel"
      />

      {/* With Different States */}
      <ActionSheet
        visible={false}
        actions={stateActions}
        cancelText="Cancel"
      />

      {/* Custom Content */}
      <Cell title="Custom Content" isLink onClick={() => setCustomVisible(true)} />
      <ActionSheet
        visible={customVisible}
        title="Custom Title"
        closeable
        onClose={() => setCustomVisible(false)}
      >
        <div style={{ padding: 16 }}>
          <p>You can put any custom content here</p>
          <p>This is useful for forms or complex selections</p>
        </div>
      </ActionSheet>

      {/* With Callback per Action */}
      <ActionSheet
        visible={false}
        actions={[
          { name: 'Delete', color: '#ee0a24', callback: () => Toast.info('Delete clicked') },
          { name: 'Save', callback: () => Toast.info('Save clicked') },
          { name: 'Share', callback: () => Toast.info('Share clicked') },
        ]}
        closeOnClickAction
        cancelText="Cancel"
      />
    </div>
  );
}

```

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

### Implement React Vant Popup Component

Source: https://context7.com/3lang3/react-vant/llms.txt

This snippet demonstrates how to use the Popup component from 'react-vant' to create various modal layers. It requires 'react' and 'react-vant' components like Popup, Button, and Cell. The component manages the visibility state for different popup positions and provides options for customization such as position, title, description, and closeability.

```jsx
import React, { useState } from 'react';
import { Popup, Button, Cell } from 'react-vant';

function PopupDemo() {
  const [centerPopup, setCenterPopup] = useState(false);
  const [bottomPopup, setBottomPopup] = useState(false);
  const [topPopup, setTopPopup] = useState(false);
  const [leftPopup, setLeftPopup] = useState(false);
  const [rightPopup, setRightPopup] = useState(false);

  return (
    <div>
      {/* Center Popup */}
      <Cell title="Center Popup" isLink onClick={() => setCenterPopup(true)} />
      <Popup
        visible={centerPopup}
        onClose={() => setCenterPopup(false)}
        style={{ padding: '30px 50px' }}
      >
        Center Content
      </Popup>

      {/* Bottom Popup */}
      <Cell title="Bottom Popup" isLink onClick={() => setBottomPopup(true)} />
      <Popup
        visible={bottomPopup}
        position="bottom"
        round
        title="Bottom Popup"
        description="This is a description"
        closeable
        onClose={() => setBottomPopup(false)}
        style={{ height: '40%' }}
      >
        <div style={{ padding: 16 }}>
          <p>Bottom popup content</p>
          <Button block onClick={() => setBottomPopup(false)}>Close</Button>
        </div>
      </Popup>

      {/* Top Popup */}
      <Cell title="Top Popup" isLink onClick={() => setTopPopup(true)} />
      <Popup
        visible={topPopup}
        position="top"
        onClose={() => setTopPopup(false)}
        style={{ height: '30%' }}
      >
        <div style={{ padding: 16 }}>Top popup content</div>
      </Popup>

      {/* Left Popup */}
      <Cell title="Left Popup" isLink onClick={() => setLeftPopup(true)} />
      <Popup
        visible={leftPopup}
        position="left"
        onClose={() => setLeftPopup(false)}
        style={{ width: '60%', height: '100%' }}
      >
        <div style={{ padding: 16 }}>Left sidebar content</div>
      </Popup>

      {/* Right Popup with Close Icon */}
      <Cell title="Right Popup" isLink onClick={() => setRightPopup(true)} />
      <Popup
        visible={rightPopup}
        position="right"
        closeable
        closeIconPosition="top-left"
        onClose={() => setRightPopup(false)}
        style={{ width: '60%', height: '100%' }}
      >
        <div style={{ padding: '50px 16px' }}>Right panel content</div>
      </Popup>
    </div>
  );
}

```

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

### React Vant Dynamic Form with Form.List

Source: https://context7.com/3lang3/react-vant/llms.txt

Illustrates how to create a dynamic form using Form.List in React Vant. This allows for adding and removing form fields programmatically, suitable for scenarios like managing a list of contacts. It utilizes the Form and Input components from react-vant.

```jsx
// Dynamic Form with Form.List
function DynamicFormDemo() {
  return (
    <Form onFinish={(values) => console.log(values)}>
      <Form.List name="contacts">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <div key={field.key}>
                <Form.Item
                  {...field}
                  name={[field.name, 'name']}
                  label={`Contact ${index + 1}`}
                  rules={[{ required: true }]
                  }
                >
                  <Input placeholder="Contact name" />
                </Form.Item>
                <Button size="small" onClick={() => remove(index)}>Remove</Button>
              </div>
            ))}
            <Button onClick={() => add()}>Add Contact</Button>
          </>
        )}
      </Form.List>
    </Form>
  );
}

```

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

### React Vant Picker Component Implementation

Source: https://context7.com/3lang3/react-vant/llms.txt

This snippet demonstrates the core functionality of the React Vant Picker component. It showcases how to implement single-column, multi-column, and cascading selections, along with handling user interactions like confirmation and cancellation. It utilizes React hooks for state management and refs for controlling component behavior.

```jsx
import React, { useState, useRef } from 'react';
import { Picker, Cell, Toast } from 'react-vant';

function PickerDemo() {
  const pickerRef = useRef(null);
  const [city, setCity] = useState('');

  // Single Column
  const singleColumns = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];

  // Multiple Columns
  const multiColumns = [
    ['Morning', 'Afternoon', 'Evening'],
    ['8:00', '9:00', '10:00', '11:00', '12:00'],
  ];

  // Cascading Data
  const cascadeColumns = [
    {
      text: 'California',
      value: 'CA',
      children: [
        { text: 'Los Angeles', value: 'LA' },
        { text: 'San Francisco', value: 'SF' },
        { text: 'San Diego', value: 'SD' },
      ],
    },
    {
      text: 'New York',
      value: 'NY',
      children: [
        { text: 'New York City', value: 'NYC' },
        { text: 'Buffalo', value: 'BUF' },
        { text: 'Albany', value: 'ALB' },
      ],
    },
  ];

  return (
    <div>
      {/* Basic Single Column */}
      <Picker
        title="Select Day"
        columns={singleColumns}
        onConfirm={(value) => Toast.info(`Selected: ${value}`)}
        onCancel={() => Toast.info('Cancelled')}
      />

      {/* Multiple Columns */}
      <Picker
        title="Select Time"
        columns={multiColumns}
        onChange={(values) => console.log('Changed:', values)}
        onConfirm={(values) => Toast.info(`Selected: ${values.join(' ')}`)}
      />

      {/* Cascading Selection */}
      <Picker
        title="Select Location"
        columns={cascadeColumns}
        onConfirm={(values, items) => {
          const location = items.map(item => item.text).join(', ');
          Toast.info(`Selected: ${location}`);
        }}
      />

      {/* With Popup Mode */}
      <Cell title="Select City" value={city || 'Please select'} isLink onClick={() => pickerRef.current?.open()} />
      <Picker
        ref={pickerRef}
        popup
        title="Select City"
        columns={['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen', 'Hangzhou']}
        onConfirm={(value) => setCity(value)}
      />

      {/* Disabled Options */}
      <Picker
        title="With Disabled"
        columns={[
          { text: 'Option 1', value: '1' },
          { text: 'Option 2 (disabled)', value: '2', disabled: true },
          { text: 'Option 3', value: '3' },
        ]}
      />

      {/* Loading State */}
      <Picker
        title="Loading"
        columns={[]}
        loading
      />

      {/* Custom Field Names */}
      <Picker
        title="Custom Fields"
        columnsFieldNames={{ text: 'label', value: 'id' }}
        columns={[
          { label: 'Item A', id: 'a' },
          { label: 'Item B', id: 'b' },
          { label: 'Item C', id: 'c' },
        ]}
      />
    </div>
  );
}

```

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

### Configure Global Settings with React-Vant ConfigProvider Component

Source: https://context7.com/3lang3/react-vant/llms.txt

The ConfigProvider component from react-vant allows for global configuration of application-wide settings such as theming and internationalization. It accepts theme variables (CSS variables) and locale objects. It can also wrap components with a custom HTML tag. Dependencies include React and specific locale files from 'react-vant/es/locale/lang'.

```jsx
import React from 'react';
import { ConfigProvider, Button, Cell, Rate } from 'react-vant';
import enUS from 'react-vant/es/locale/lang/en-US';

function ConfigProviderDemo() {
  // Custom Theme Variables
  const customTheme = {
    '--rv-primary-color': '#7232dd',
    '--rv-button-primary-background-color': '#7232dd',
    '--rv-button-primary-border-color': '#7232dd',
    '--rv-rate-icon-full-color': '#7232dd',
  };

  // Dark Theme
  const darkTheme = {
    '--rv-text-color': '#f5f5f5',
    '--rv-background-color': '#1a1a1a',
    '--rv-cell-background-color': '#2d2d2d',
  };

  return (
    <div>
      {/* Custom Theme */}
      <ConfigProvider themeVars={customTheme}>
        <Button type="primary">Purple Button</Button>
        <Rate defaultValue={3} />
        <Cell title="Custom themed cell" value="Value" />
      </ConfigProvider>

      {/* English Locale */}
      <ConfigProvider locale={enUS}>
        <Cell title="English locale" value="Content" />
      </ConfigProvider>

      {/* Combined Configuration */}
      <ConfigProvider themeVars={customTheme} locale={enUS}>
        <div>
          <Button type="primary">Themed Button</Button>
          <Cell title="Configured Cell" isLink />
        </div>
      </ConfigProvider>

      {/* Custom Tag */}
      <ConfigProvider tag="section">
        <Button>Inside section tag</Button>
      </ConfigProvider>
    </div>
  );
}

// Global CSS Variable Override (in your CSS file)
/*
:root {
  --rv-primary-color: #1989fa;
  --rv-success-color: #07c160;
  --rv-danger-color: #ee0a24;
  --rv-warning-color: #ff976a;
}
*/

```

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

### Manual Swiper Control in React

Source: https://context7.com/3lang3/react-vant/llms.txt

Shows how to manually control the Swiper component using previous, next, and specific slide navigation. This involves using a ref to access Swiper methods. Requires React and react-vant.

```jsx
import React, { useRef } from 'react';
import { Swiper, Image, Button } from 'react-vant';

function SwiperDemo() {
  const swiperRef = useRef(null);

  const images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
  ];

  return (
    <div>
      <Swiper ref={swiperRef} loop={false}>
        {images.map((image, index) => (
          <Swiper.Item key={index}>
            <Image src={image} fit="cover" style={{ height: 150 }} />
          </Swiper.Item>
        ))}
      </Swiper>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 10 }}>
        <Button size="small" onClick={() => swiperRef.current?.swipePrev()}>Prev</Button>
        <Button size="small" onClick={() => swiperRef.current?.swipeTo(0)}>First</Button>
        <Button size="small" onClick={() => swiperRef.current?.swipeNext()}>Next</Button>
      </div>
    </div>
  );
}

```

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

### Swiper with Custom Slide Size in React

Source: https://context7.com/3lang3/react-vant/llms.txt

Demonstrates configuring the Swiper component with custom slide size and track offset. This affects how much of each slide is visible and the spacing. Requires React and react-vant.

```jsx
import React from 'react';
import { Swiper, Image } from 'react-vant';

function SwiperDemo() {
  const images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
  ];

  return (
    <Swiper slideSize={80} trackOffset={10}>
      {images.map((image, index) => (
        <Swiper.Item key={index}>
          <Image src={image} fit="cover" style={{ height: 150 }} />
        </Swiper.Item>
      ))}
    </Swiper>
  );
}

```

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

### Use Update Effect Hook in React

Source: https://context7.com/3lang3/react-vant/llms.txt

The `useUpdateEffect` hook is similar to `useEffect` but skips the initial render. It only runs the effect when one of its dependencies changes, making it ideal for logic that should not execute on component mount.

```jsx
import React, { useState } from 'react';
import { hooks, Button } from 'react-vant';

function UpdateEffectDemo() {
  const [count, setCount] = useState(0);

  hooks.useUpdateEffect(() => {
    console.log('Count updated:', count);
  }, [count]);

  return <Button onClick={() => setCount(c => c + 1)}>Count: {count}</Button>;
}
```