DOCSEARCHbyAlgolia
Submit Docs

Zent React Component Library

repository·master·Indexed 24 days ago

https://github.com/youzan/zent

A React component library developed by Youzan providing over 50 high-quality UI components. It includes a dedicated Babel plugin, babel-plugin-zent (requiring Zent >= 7.0.0), to optimize bundle size through on-demand imports and automatic style injection. The library supports React 17+, server-side rendering, and modern browsers.

Tokens
101.9K
Snippets
97
Records
656
Agent score
80%

What's inside Zent

  1. Overview of Zent features

    master

    Zent is a React implementation of the Youzan PC WebUI specification. Key features include:

    • High-quality basic React components and rich business components.
    • Built-in TypeScript type definitions.
    • Support for custom themes.
    • On-demand loading of code and styles (tree-shaking/code splitting support).
    • An icon library designed by Youzan designers.

  2. Overview of DatePicker components

    master

    The DatePicker package provides a variety of datetime pickers for different selection granularities and ranges.

    Included Pickers:

    • Single selection: DatePicker, WeekPicker, MonthPicker, QuarterPicker, YearPicker, TimePicker, SingleCalendarDatePanelPicker.
    • Range selection: DateRangePicker, CombinedDateRangePicker, TimeRangePicker, CombinedTimeRangePicker, CombinedPanelRangePicker.

    Time Selection Support: Several pickers can enable time selection by using the showTime property. Supported pickers include DatePicker, CombinedDateRangePicker, DateRangePicker, SingleCalendarDatePanelPicker, and CombinedPanelRangePicker.

  3. Use the Tree component to display hierarchical content

    master

    The Tree component is used to visually display multilevel content with support for expanding, collapsing, and selecting nodes. It can handle both hierarchical data structures (dataType='tree') and flat lists with parent references (dataType='plain').

    Key Features

    • Expansion/Collapse: Control node visibility via foldable and expandAll props.
    • Selection & Checking: Supports single selection (selectable, selectedKey) and checkbox-based checking (checkable, onCheck, checkedKeys).
    • Asynchronous Loading: Use the loadMore prop to fetch children nodes asynchronously via a Promise.
    • Custom Rendering: Use the render prop to provide a custom function for rendering nodes, or use operations to add custom actions/icons to each node.

  4. Use the Progress component

    master

    The Progress component is used to display the current progress of an operation that takes a long time to complete.

    When to use

    • When an operation takes a long time to finish.
    • When an operation is running in the background and may take more than 4 seconds.
    • When the action needs to show a specific percentage of completion.

    Best Practices

    • If the process time cannot be estimated, it is recommended to use a Loading component instead of Progress.
    • Do not use Progress for actions that are expected to complete within 4 seconds.

  5. Use the ClampLines component to truncate multi-line text

    master

    The ClampLines component limits the maximum number of lines displayed for a given text string. It is useful for preventing long text from breaking layouts.

    Important Considerations:

    • Performance: Avoid using many ClampLines components on a single page to prevent performance degradation.
    • Browser Support: Adapting to container size changes requires ResizeObserver support. For older browsers, you must provide a ResizeObserver polyfill. If ResizeObserver is unavailable, the component will only respond to window resize events.
    • Algorithms: You can choose between two modes via the mode prop:
      • 'performance' (default): Prioritizes speed. In extreme cases (e.g., mixing large blocks of English/Chinese or using emojis), the truncation point might be slightly inaccurate. It is highly reliable for single-language text.
      • 'correctness': Ensures exact truncation accuracy but is significantly slower (potentially causing noticeable lag for texts with hundreds of characters). Use with caution.

  6. Use the Dropdown component

    master

    The Dropdown component provides a dropdown menu, typically used in conjunction with the Menu component.

    Note that Dropdown inherits its core functionality and props from the Popover component, only applying certain default values. For a complete list of available props, refer to the Popover API documentation.

  7. Use the TextMark component to highlight keywords

    master
    The TextMark component is used to highlight specific keywords within a string of text. It supports custom styling via CSS classes or inline styles, and allows you to specify different styles for different keywords. You can also control whether the matching is case-sensitive and how special characters in regular expressions are handled.

  8. Use TextMark to highlight selected words

    master
    The TextMark component is used to highlight specific words or patterns within a string. It accepts a target text and a list of words or regular expressions to search for. You can customize the appearance of the highlights using CSS classes (highlightClassName, activeClassName, unhighlightClassName), inline styles (highlightStyle, activeStyle, unhighlightStyle), or by specifying a custom component to render the highlighted segments via highlightTag (defaults to 'mark').

  12. Use Placeholder components for loading states

    master

    The Placeholder component group is used to display skeleton screens or placeholder blocks while a component is rendering or loading asynchronous data. This helps reduce user anxiety during wait times.

    You can use two approaches:

    1. Preset Combinations: Use TextBlock or RichTextBlock for quick implementation of text-based placeholders.
    2. Custom Placeholders: Use base components like TextRow, TextRowDashed, Circle, and Rectangle to build custom layouts that match your specific UI requirements.