React Vant

react-vant is a mobile UI component library for React, inspired by Vant. It is designed for high performance and mobile-first scenarios.

Key Features

• High Performance: Components are lightweight, averaging less than 1KB (min+gzip).
• Comprehensive: Over 70 high-quality components covering mainstream mobile use cases.
• TypeScript Support: Written in TypeScript with full type definitions provided.
• Customizable: Supports theme customization with over 700 built-in theme variables.
• Optimized Bundling: Supports tree shaking and on-demand imports.
• Modern Tooling: Compatible with Vite and Parcel@2.
• SSR Support: Supports Server-Side Rendering via Next.js and Remix.

The Slider component is a sliding input bar used to select a value within a given range. It supports single value selection and range selection (dual sliders).

import { useState } from 'react';
import { Slider } from 'react-vant';

export default () => {
  const [value, setValue] = useState(10);

  return <Slider value={value} onChange={setValue} />;
};

The Space component is used to set spacing between components to prevent them from being tightly packed together and to maintain a consistent layout. It supports both horizontal and vertical directions, alignment on both axes, and automatic wrapping.

import { Space } from 'react-vant';

The repository is organized into several key directories:

• src: Contains the component source code. Each component resides in its own folder within src/components.
• docs: Contains the source code for the documentation website.
• dist: Contains the built component artifacts.
• docs-dist: Contains the built documentation artifacts.
• typings: Contains type definitions.

The areaList prop expects an object containing three keys: province_list, city_list, and county_list.

Each list is an object where the key is a 6-digit area code (e.g., 110000 for Beijing) and the value is the name of the region. The area code follows a pattern where the first two digits represent the province, the middle two the city, and the last two the county/district.

const areaList = {
  province_list: {
    110000: '北京市',
    120000: '天津市',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    // ....
  },
};

The useFormSmart hook simplifies managing Form components by providing data synchronization capabilities. It allows you to automatically update form values when external data changes.

Default Behavior

By default, when the value option is provided, the hook sets the form values once. Subsequent changes to value will not re-trigger the form update (similar to initialValues in a standard Form), but it does include empty value detection.

Enabling Continuous Synchronization

If you need the form to update every time the external value changes, set the sync option to true. This is useful for scenarios where the source data is frequently refreshed or updated.

To use it, pass the returned ref to the Form component.

To react to changes in specific fields (e.g., showing/hiding fields based on a selection), use one of these two methods:

Form.Subscribe

Use Form.Subscribe to wrap a section of your UI that needs to re-render when specific fields change. It provides a render function with changedValues and the form instance.

Form.useWatch

Use the Form.useWatch hook to watch a specific field and trigger a re-render of the component where the hook is called.

Complex Linkage with shouldUpdate

For more complex logic, use the shouldUpdate prop on Form.Item. This allows you to manually control when a specific field item re-renders based on the current form state.