DEV Community: 郭小铭

React Suite v6: A Steady Step Toward Modernization

郭小铭 — Sat, 22 Nov 2025 02:57:16 +0000

React Suite (rsuite) v6 is now available. This release focuses on modernizing the foundation: the styling system has been rebuilt, new layout primitives were added, and responsiveness plus the overall developer workflow received targeted improvements. The goal is to keep the library stable while making it easier to adapt to contemporary UI requirements.

1. Style System Overhaul: CSS Variables by Default

The most fundamental change in v6 is the migration from Less to SCSS with CSS variables as the primary theming interface. Updating theme values is now as simple as overriding variables at runtime—no rebuilds or tooling tweaks required.

Consult the CSS Variables guide for the full variable list, and try the Palette tool to fine-tune brand colors visually.

Additional Style Improvements

Logical properties: margin-inline-start etc. replace physical properties for native RTL support.
rem units: font sizes, spacing, and component dimensions now use rem to cooperate with responsive typography and accessibility scaling.

2. AI-Ready Documentation and Tooling

v6 includes first-class support for AI-assisted workflows, making it easier for tools like Cursor or Windsurf to reason about RSuite APIs.

LLMs.txt

Following the llms.txt standard, the docs site now exposes /llms.txt, a machine-readable index optimized for large language models. AI tools can retrieve up-to-date component APIs, usage notes, and examples, reducing hallucinations.

MCP Server

The official Model Context Protocol (MCP) server lets AI agents read RSuite knowledge directly:

Real-time retrieval of component docs and props.
Context-aware suggestions that adapt to the code you are writing.
Lower error rates thanks to grounding answers in first-party docs.

3. Atomic Layout Building Blocks: Box & Center

v6 introduces foundational layout primitives so you can compose complex UIs without leaving JSX.

Box

Box exposes spacing, color, and layout props directly on the component, removing the need for ad-hoc CSS classes.

import { Box, Button } from 'rsuite';

function App() {
  return (
    <Box p={20} m={10} bg="gray-100" borderRadius={8} display="flex" justifyContent="space-between">
      <h2>Welcome to v6</h2>
      <Button appearance="primary">Get Started</Button>
    </Box>
  );
}

Center

Center solves vertical + horizontal centering with a single component:

import { Center } from 'rsuite';

<Center height={200} className="bg-blue-50">
  <div>Perfectly Centered Content</div>
</Center>;

4. End-to-End Responsive Enhancements

Core components were revisited to ensure consistent behavior across screen sizes.

Grid redesign: Row/Col now support object-based breakpoints for clearer responsive rules.

  <Row align="center" justify="space-between">
    <Col span={{ xs: 24, md: 12, lg: 8 }}>...</Col>
    <Col span={{ xs: 24, md: 12, lg: 8 }}>...</Col>
  </Row>

Navbar & Sidenav: Navbar.Content replaces the deprecated pullRight, enabling predictable layouts on mobile.

  <Navbar>
    <Navbar.Brand>BRAND</Navbar.Brand>
    <Navbar.Content>
      <Nav>...</Nav>
    </Navbar.Content>
    <Navbar.Content>
      <Avatar />
    </Navbar.Content>
  </Navbar>

Picker family: automatically switches to touch-friendly interactions on small screens.

Your browser does not support the video tag. Use the link above to view the demo.

5. New Components and Hooks

Beyond layout primitives, v6 introduces practical components and hooks to cover more real-world scenarios.

Components

SegmentedControl: modern segmented switch for view or filter toggles.
PasswordInput: built-in show/hide toggle for password fields.
PinInput: OTP/PIN entry with auto focus and intelligent paste handling.
Textarea: dedicated multiline input with consistent styling.
Kbd: display keyboard shortcuts in docs or product UIs.
Link: unified link styling with accessibility-friendly defaults.
Menu & MegaMenu: flexible navigation for large information architectures.
Form.Stack: replaces layout props on Form, offering predictable spacing and alignment.

<Form>
  <Form.Stack layout="horizontal" spacing={20}>
    <Form.Group>
      <Form.Label>Username</Form.Label>
      <Form.Control name="username" />
    </Form.Group>
    {/* ... */}
  </Form.Stack>
</Form>

Hooks

useDialog: manage modal dialogs via function calls instead of manual state wiring.

  const dialog = useDialog();

  const handleClick = async () => {
    const result = await dialog.confirm({
      title: 'Confirm action',
      children: 'Are you sure you want to proceed?'
    });
    if (result) {
      console.log('Confirmed');
    }
  };

useFormControl: create custom form controls with built-in validation state handling.

6. Developer Experience Improvements

Vitest adoption: the test suite moved from Karma/Mocha to Vitest for faster feedback loops.
TypeScript fidelity: refined component exports and new Schema type re-exports for better IntelliSense.
Bundle size discipline: size-limit checks improve tree-shaking.
Tooling ecosystem: Bun installation steps are documented to match modern toolchains.
Runtime diagnostics: useToaster warns when used outside CustomProvider, helping catch misconfiguration quickly.

7. Additional Enhancements

Badge: new size, outline, placement, and shape options.

  <Badge content="New" size="lg" outline />
  <Badge content={99} shape="square" placement="bottomEnd" />

Breadcrumb: refreshed defaults for better visual balance.
DatePicker: toolbar layout tweaks for clearer interactions.
Progress: indeterminate animation plus segmented progress support.
TreePicker: onlyLeafSelectable enforces leaf-only selection when needed.
Button: toggle state support.
InputGroup: improved visuals for inside buttons.
Dependency updates: Date-fns 4.x, Prettier 3.x, and other core packages are aligned with current ecosystems.

Get Started

React Suite v6 is available on npm:

npm install rsuite@latest

Refer to the migration guide for detailed upgrade instructions.

If you find the release useful, leave a star on GitHub or share your experience in Discussions.

React Suite Team

React Suite 5 Release Improved Support for Accessibility 🎉

郭小铭 — Sun, 26 Sep 2021 10:44:56 +0000

It has been nearly two years since the first version of v4. During this time, more than 30 versions of v4 have been iterated and many new features have been added. More and more developers are starting to use React Suite and participating in function development and improvement. And the developers who have been making valuable suggestions to us, we thank you again. I hope React Suite can accompany your product to continue to grow, and also hope to serve more developers.

The accessibility and scalability of components are improved in React Suite 5. The following will introduce in detail the new features and how to upgrade from 4.x to 5.0.

Major changes ✨

Improve accessibility

It is our hope that more users can use barrier-free use of products developed by React Suite. We will improve each component provided by React Suite in multiple scenarios such as keyboard operation and screen reading devices.

Accessibility

React Suite follows the WAI-ARIA standard. All components have been refactored to have appropriate attributes and keyboard interaction functions out of the box.

Add a set of high contrast themes

In React Suite v4, we refer to the 《Web Content Accessibility Guidelines (WCAG) 》 standard for color contrast requirements, and have made great improvements to the components to meet most users. We still hope to improve on this basis and take care of a small number of people with visual impairments. React Suite officially provides a total of 3 sets of themes (light, dark, high-contrast).

Use SVG Icon instead of Icon font

Icon font has some rendering problems, which makes the icon blurry, the need to load the font file, and the content area flickers. For better accessibility, we decided to prefer SVG Icon. And can be well compatible with third-party icon resources.

import GearIcon from "@rsuite/icons/Gear";

render(<GearIcon />);

// output
<svg>
  <path d="M11.967 ..."></path>
  <path d="M8 10a2 2 0 10.001-3.999A2 2 0 008 10zm0 1a3 3 0 110-6 3 3 0 010 6z"></path>
</svg>;

Support CSS variables

Current mainstream browsers already support CSS variables. We plan to provide a set of component CSS variable configurations to make theme customization and theme switching more convenient.

Refactoring React Class Components with Hooks

We refactored most of our components using function component and adopted the new features brought by React Hooks to enhance the development experience.

Import on Demand

When importing components in v4, you need to distinguish between cjs and esm. In v5 this is automatic.

// v4: cjs
import Button from "rsuite/lib/Button";
// v4: esm
import Button from "rsuite/es/Button";

// v5
import Button from "rsuite/Button";

Improvements to Form

Improve the style of Form in plain text mode
Rename Form related components

Rename FormGroup to Form.Group
Rename FormControl to Form.Control
Rename ControlLabel to Form.ControlLabel
Rename ErrorMessage to Form.ErrorMessage
Rename HelpBlock to Form.HelpText

Form validation supports object structure

const model = SchemaModel({
  username: StringType().isRequired("Username required"),
  tags: ArrayType().of(StringType("The tag should be a string").isRequired()),
  role: ObjectType.shape({
    name: StringType().isRequired("Name required"),
    permissions: ArrayType().isRequired("Permissions required"),
  }),
});

const checkResult = model.check({
  username: "foobar",
  tags: ["Sports", "Games", 10],
  role: { name: "administrator" },
});

console.log(checkResult);

output:

{
  username: { hasError: false },
  tags: {
    hasError: true,
    array: [
      { hasError: false },
      { hasError: false },
      { hasError: true, errorMessage: 'The tag should be a string' }
    ]
  },
  role: {
    hasError: true,
    object: {
      name: { hasError: false },
      permissions: { hasError: true, errorMessage: 'Permissions required' }
    }
  }
};

For detailed usage, please read: Form Validation and Schema

Added support for srcSet, sizes,imgProps on Avatar

srcSet: The srcSet attribute for the img element. Use this attribute for responsive image display.
sizes: The sizes attribute for the img element.
imgProps: Attributes applied to the img element if the component is used to display an image.

Added support `onChangeCommitted` on Slider and RangeSlider

The difference between onChangeCommitted and onChange is that onChange is triggered every time the value changes, while onChangeCommitted is a callback that is triggered after the mouseup event is triggered and the value changes.

Improvements to DatePicker and DateRangePicker

DatePicker and DateRangePicker support keyboard input.
DateRangePicker can only select date before, and time can be selected in v5

<DateRangePicker format="yyyy-MM-dd HH:mm:ss" />

Add support for `color` on Badge

<Badge color="red">Red</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="yellow">Yellow</Badge>

Improvements to Table

Refactor Table

Use react hooks to refactor the Table and improve the performance when the table scrolls. The onDataUpdated and bodyRef props are deprecated.

For some components to be rendered inside the table, the body container of the table can be obtained through bodyRef before. Now we can get the container directly through the ref of Table.

// v4
const bodyRef = useRef();
return (
  <>
    <Table
      bodyRef={(body) => {
        bodyRef.current = body;
      }}
    />
    <CheckPicker container={() => bodyRef.current} />
  </>
);

// v5
const ref = useRef();
return (
  <>
    <Table ref={ref} />
    <CheckPicker container={() => ref.current.body} />
  </>
);

Add support for rowSpan

const data = [
  {
    city: "New Gust",
    name: "Janis",
    rowspan: 2,
  },
  {
    city: "New Gust",
    name: "Ernest Schuppe Anderson",
  },
  {
    city: "Maria Junctions",
    name: "Alessandra",
    rowspan: 3,
  },
  {
    city: "Maria Junctions",
    name: "Margret",
  },
  {
    city: "Maria Junctions",
    name: "Emiliano",
  },
];
return (
  <Table data={data}>
    <Column
      width={100}
      verticalAlign="middle"
      rowSpan={(rowData) => {
        return rowData.rowspan;
      }}
    >
      <HeaderCell>Name</HeaderCell>
      <Cell dataKey="city" />
    </Column>
    <Column width={100}>
      <HeaderCell />
      <Cell dataKey="name" />
    </Column>
  </Table>
);

Add support for TagInput

The enhancement of Input supports input tags and management tags.

import TagInput from "rsuite/TagInput";

return (
  <TagInput
    defaultValue={["HTML", "CSS"]}
    trigger={["Enter", "Space", "Comma"]}
  />
);

Improvements to Carousel

Support onSelect, onSlideEnd, onSlideStart on <Carousel>

onSelect: Callback fired when the active item changes
onSlideEnd: Callback fired when a slide transition ends
onSlideStart: Callback fired when a slide transition starts

Migration from v4 to v5

The next step will provide you with guidance so that you can quickly migrate from v4 to v5.

Updating your dependencies

React is upgraded to version 16.8 and above.
Make sure your current rsuite version is 4.*, otherwise please migrate to v4 first.

Run codemods

The process of upgrading components for large projects is often painful. We have prepared these codemods to ease your migration experience.

Usage

npx rsuite-codemod <transform> <path> [...options]

transform - name of transform.
path - files or directory to transform.
use the --dry option for a dry-run and use --print to print the output for comparison.

Handling breaking changes

Supported browsers

Dropped Internet Explorer 10

- last 2 versions or > 1% or ie >= 10
+ last 2 versions or > 1% and not ie <11

Use SVG Icon instead of Icon font

Use SVG Icon, import dependency @rsuite/icons.

npm i @rsuite/icons

// for rsuite v4
import { Icon } from "rsuite";

return <Icon icon="gear" />;

// for rsuite v5
import GearIcon from "@rsuite/icons/Gear";

return <GearIcon />;

The size property has been removed and replaced by fontSize.

// for rsuite v4
return <Icon icon="gear" size="3x" />;

// for rsuite v5
return <GearIcon style={{ fontSize: "3em" }} />;

The relationship between the size attribute value and its corresponding fontSize value is as follows:

lg : 1.3333em
2x : 2em
3x : 3em
4x : 4em
5x : 5em

date-fns upgrade v2

The date-fns tool is used in React Suite for date format, calculation, etc. Based on the Unicode standard, the new format string used for format functions has changed. [Detailed description]

// for rsuite v4

return (
  <>
    <DatePicker format="YYYY-MM-DD" />
    <DateRangePicker format="YYYY-MM-DD" />
  </>
);

// for rsuite v5

return (
  <>
    <DatePicker format="yyyy-MM-dd" />
    <DateRangePicker format="yyyy-MM-dd" />
  </>
);

Alert is deprecated. Use `toaster.push(<Message>)` instead

All pop-up notification messages are managed using the new API toaster. The Alert component will be deprecated. The alternative is to use a combination of toaster and Message. E.g:

// for rsuite v4
Alert.info("description");

// for rsutie v5
toaster.push(
  <Message type="info" closable>
    description
  </Message>
);

Remove messages and clear all messages

// Remove message
const key = toaster.push(
  <Message type="info" closable>
    description
  </Message>
);
toaster.remove(key);

// Clear all messages
toaster.clear();

Refactor Notification

// for rsuite v4
Notification.info({
  title: "info",
  description: "description",
  duration: 4500,
  placement: "topStart",
});

// for rsuite v5
toaster.push(
  <Notification type="info" header="info" duration={4500}>
    description
  </Notification>,
  { placement: "topStart" }
);

Rename Form related components

FormGroup was renamed to Form.Group
FormControl was renamed to Form.Control
ControlLabel was renamed to Form.ControlLabel
ErrorMessage was renamed to Form.ErrorMessage
HelpBlock was renamed to Form.HelpText

Rename the `componentClass` property of all components to `as`

// for rsuite v4
return <Button componentClass="span" />;

// for rsuite v5
return <Button as="span" />;

Disable all picker `virtualized` by default

The default value of virtualized for all pickers is false. If you want to continue using it in the project, you need to set it to true.

<SelectPicker virtualized />

Improve the way to update children asynchronously

In order to facilitate asynchronous updating of child nodes, a new getChildren property has been added. Affected components:

Cascader
MutilCascader
TreePicker
CheckTreePicker

getChildren:(node: ItemDataType) => Promise<ItemDataType[]>

function fetchNodes(id) {
  return new Promise((resolve) => {
    // fetch the child node data async
    resolve(childrenNodes);
  });
}

return (
  <>
    <Cascader getChildren={(node) => fetchNodes(node.id)} />
  </>
);

Removed `Table.Pagination`, and enhanced `Pagination`

The Table.Pagination component has been removed in this version. Please use Pagination instead. The layout property has been added for customizing the layout.

// for rsuite v4
return (
  <Table.Pagination
    lengthMenu={[
      { value: 50, label: 50 },
      { value: 100, label: 100 },
    ]}
    activePage={1}
    displayLength={20}
    total={100}
    onChangePage={handleChangePage}
    onChangeLength={handleChangeLength}
  />
);

// for rsuite v5
return (
  <Pagination
    limit={50}
    limitOptions={[50, 100]}
    layout={["total", "-", "limit", "|", "pager", "skip"]}
    total={100}
    activePage={1}
    onChangePage={handleChangePage}
    onChangeLimit={handleChangeLimit}
  />
);

Replace `IntlProvider` with `CustomProvider`

// for rsuite v4
import { IntlProvider } from "rsuite";
import zhCN from "rsuite/lib/IntlProvider/locales/zh_CN";

return (
  <IntlProvider locale={zhCN}>
    <App />
  </IntlProvider>
);

// for rsuite v5
import { CustomProvider } from "rsuite";
import zhCN from "rsuite/locales/zh_CN";

return (
  <CustomProvider locale={zhCN}>
    <App />
  </CustomProvider>
);

Deprecate `activeKey` and `onSelect` properties of `<Sidenav>`

<Sidenav> is always used in conjunction with <Nav>.
You should use activeKey and onSelect properties of <Nav> instead.

// for rsuite v4

return (
  <Sidenav activeKey={activeKey} onSelect={setActiveKey}>
    <Sidenav.Body>
      <Nav>
        <Nav.Item>Nav item</Nav.Item>
        <Dropdown title="Dropdown">
          <Dropdown.Item>Dropdown item</Dropdown.Item>
        </Dropdown>
      </Nav>
    </Sidenav.Body>
  </Sidenav>
);

// for rsuite v5

return (
  <Sidenav>
    <Sidenav.Body>
      <Nav activeKey={activeKey} onSelect={setActiveKey}>
        <Nav.Item>Nav item</Nav.Item>
        <Dropdown title="Dropdown">
          <Dropdown.Item>Dropdown item</Dropdown.Item>
        </Dropdown>
      </Nav>
    </Sidenav.Body>
  </Sidenav>
);

Import on Demand

Import components

// v4
import Button from "rsuite/lib/Button";
import "rsuite/lib/Button/styles/index.less";

// v5
import Button from "rsuite/Button";
import "rsuite/Button/styles/index.less";

Import locales

// v4
import ruRU from "rsuite/lib/IntlProvider/locales/ru_RU";

// v5
import ruRU from "rsuite/locales/ru_RU";

Import styles globally

// v4
import "rsuite/lib/styles/index.less"; // less
import "rsuite/dist/styles/rsuite-default.css"; // css

// v5
import "rsuite/styles/index.less"; // less
import "rsuite/dist/rsuite.min.css"; // or css
import "rsuite/dist/rsuite-rtl.min.css"; // or rtl css

Deprecate `renderTitle` property of `<Dropdown>`

The renderTitle has been deprecated and replaced by renderToggle.

//v4
return (
  <Dropdown
    renderTitle={() => (
      <IconButton appearance="primary" icon={<Icon icon="plus" />} circle />
    )}
  >
    ...
  </Dropdown>
);

//v5
return (
  <Dropdown
    renderToggle={(props, ref) => (
      <IconButton
        {...props}
        ref={ref}
        icon={<PlusIcon />}
        circle
        appearance="primary"
      />
    )}
  >
    ...
  </Dropdown>
);

Use `open/close` instead of `show/hide`.

In v4, the attribute naming of the component has the use of open/close and show/hide at the same time. Unified naming in v5.

// v4

<Modal show="{true}" onShow="{...}" onHide="{...}" />
<Drawer show="{true}" onShow="{...}" onHide="{...}" />
<Whisper delayHide="{1000}" delayShow="{1000}" />

// v5
<Modal open="{true}" onOpen="{...}" onClose="{...}" />
<Drawer open="{true}" onOpen="{...}" onClose="{...}" />
<Whisper delayClose="{1000}" delayOpen="{1000}" />

Supporting React Suite

If you like React Suite, you can show your support by either

Starring this repo
Leaving a comment here if you are using React Suite in your project (like we do 😄)
Becoming a backer on OpenCollective

Table component that supports both virtualized table and tree tables

郭小铭 — Thu, 21 Nov 2019 03:26:33 +0000

There is such a need, a React Suite (hereinafter referred to as rsuite) users, he needs a Table component to support tree data like Jira Portfolio, and need to support big data rendering. As of now (November 21, 2019), no supportable components have been found in the open source UI library, so rsuite supports this feature in the latest release.

Next, let’s see how these two features are supported in rsuite?

Large table virtualization

First, let’s look at supporting big data rendering. Rendering too many DOM elements in a page can cause performance problems. There must be a solution to optimize it. Let’s call it big table virtualization for the time being.
The so-called large form virtualization is to set a large data (such as 10000 data) for the table, and then virtual one table to hide the data that does not need to be displayed.

In order to solve the performance problems that occur when a large number of DOMs are rendered by the browser, we can’t render 10,000 pieces of data to the page, in one way, only render the data in the visible range. At the same time, a scroll bar is set for the table, and the data of the area is only rendered when scrolling to the area to be displayed, and the number of DOMs is reduced.

Preview

The above is a Table of 10000 data. The rendered HTML structure is:

We can see that only 14 rs-table-row are rendered in the Table , the first and last ones are not children, just a placeholder with height. Every rs-table-row is absolutely positioned, so even if you delete a Row in a Table, or add a Row, it will not change the position of other Rows. On this basis, by obtaining the scroll position of the scroll bar, it is easy to judge whether the top value of the current Row is within the visible range of the Table, and update all the Rows at the same time.
Many excellent libraries implement such a function, and the principle is basically the same. For example, react-virtualized provides the Table component, but he does not support Tree.

Tree Table

The need to display tree data in a table, we see more like the Gantt chart table. It has a child-parent relationship and can expand child nodes.

Such a table is supported by many Table components, but it is relatively cumbersome if you need to support virtualization at the same time, because you need to recalculate the displayed DOM and set the position of the scroll bar when you expand the closed node.

In versions prior to the rsuite Table component, the DOM structure of the rendered tree table was a Tree. So first you need to flatten the Tree, convert a one-dimensional array, set the parent node for each node, and render the relative position of the Tree node by the depth of the parent node. Then it is better to deal with, just need to deal with the data filtering when clicking the expand and close node button.

Install and use

The design of rsuite’s Table component is very convenient for development. The structure is defined by the <Table>, <Column>, <Cell>, <HeaderCell> components, and the table data is rendered by assigning the data property.

Install

npm install rsuite --save

If you only want to use Table in your project and don’t want to install the entire rsuite library, you can install rsuite-table separately.

Example:

import { Table } from 'rsuite';

const { Column, HeaderCell, Cell } = Table;
const data = [{ id: 1, name: 'foobar', email: 'foobar@xxx.com' }];

ReactDOM.render(
  <Table height={400} data={data}>
    <Column width={70}>
      <HeaderCell>ID</HeaderCell>
      <Cell dataKey="id" />
    </Column>
    <Column width={200}>
      <HeaderCell>Name</HeaderCell>
      <Cell dataKey="name" />
    </Column>
    <Column width={200}>
      <HeaderCell>Email</HeaderCell>
      <Cell dataKey="email" />
    </Column>
  </Table>
);

Finally

As a mature Table component, what features does it support?

Resizable column width
Fixed column
Sort
Pagination
Editable
Merge Cells
Custom cell
Automatic column width
Expandable row

The only question left is whether you are willing to use it in your project?

https://github.com/rsuite/rsuite

React Suite 4.1.0 release, support for RTL 🎉

郭小铭 — Wed, 20 Nov 2019 03:05:38 +0000

React Suite released version 4.0 two months ago, supporting dark mode, and more and more developers have noticed that it is a library of UI components that focus on internationalization and accessibility. Today, two months later, the 4.1 release was ushered in. In this release, we have added and improved some components, and let the components support Right-to-left (RTL). Ability to provide better service in languages such as Arabic and Hebrew. Next, let's take a look at the contents of the 4.1 release.

1、Support Right-to-left (RTL)

Most countries read from left to right, but in the Middle East, there are many countries, such as Arabic and Hebrew. Their reading habits are from right to left, which is exactly the opposite. All React Suite supports right-to-left methods in both components and documentation.

Steps for usage

1.1 HTML

Make sure the dir attribute is set on the body:

<body dir="rtl">

1.2 IntlProvider

Set the rtl attribute on the IntlProvider component to configure all components to support RTL.

ReactDOM.render(
  <IntlProvider rtl>
    <App />
  </IntlProvider>,
  document.getElementById('root')
);

1.3 postcss-rtl

You need to flip the style with the postcss-rtl plugin.

npm i postcss
npm i postcss-rtl

Configure postcss.config.js

module.exports = {
  plugins: function() {
    return [require('postcss-rtl')(options)];
  }
};

Head to the plugin README to learn more about it.

2、Added support for Carousel

The Carousel component is used to display a set of elements that need to be rotated, support automatic page turning, and personalization.

3、Panel supports Card view

Developers have been asking if React Suite can support Card. In fact, Card can achieve Card effect through the combination of Panel components.

3.1 Render a Card

For example, the above example is implemented by two Panel nestings, but the shaded property is added in this version to allow the Panel to display shadows.

const instance = (
  <Panel shaded bordered bodyFill>
    <img src="..." height="240" />
    <Panel header="RSUITE">
      <p>
        ...
      </p>
    </Panel>
  </Panel>
);
ReactDOM.render(instance);

3.2 Panel and Grid combination

4、Timeline supports more display modes

Timeline component adds the align attribute to allow the Timeline component to support multiple alignments.
Timeline.Item supports the time attribute, which allows you to customize the timeline time.

5、Add Affix component

Affix can help navigation, buttons and other components be fixed in the visible range. It is often used for pages with long content, fixing the specified elements in the visible range of the page, and assisting in quick operations.

For example, keep a button fixed at 50px from the top of the page:

<Affix top={50}>
  <Button>Top</Button>
</Affix>

6、Other improvements and fixes

On the Uploader component, add support for the fileListVisible property, which defaults to true and is set to false to not display the file list.
The navigation component can be used to add the renderItem property. For example, when the Link component of Next.js is used in combination, the renderItem property can be used. For details, see the example.
Fixed an issue where the sideEffects configuration error caused the style file to be lost.
Fixed an issue where menus were not rendered when sticky was set and all options were selected.

7、At last

I hope that our growth will bring a better experience to more developers.If you like React Suite, you can show your support by either

Star this repo.
Leaving a comment here if you are using RSUITE in your project
Becoming a backer on OpenCollective

🎉 React Suite 4.0 release

郭小铭 — Wed, 20 Nov 2019 03:01:32 +0000

The new semester is another new starting point. React Suite is welcoming the release of version 4.0. Since the design of the V4 version in March 2019, after more than six months of development and testing, discussions and disputes, I have finally completed all the plans.

In this harvest season, we have prepared a series of updates for everyone, are you ready?

1, migrate from Flow to TypeScript

First of all, thanks to Flow for supporting the entire V3 release, the component library can easily have static type checking. With the wider use of TypeScript and the problems that Flow has exposed, we have abandoned Flow in this release and refactored all the code with TypeScript. Make the code more readable and maintainable.

2, accessibility improvement

To support the new browser features, we abandoned IE9 in the previous version of V3. But we still hope that the Web application developed with React Suite will be used by as many people as possible and better. We try to reach more people in terms of accessibility.

2.1 Color contrast improvement

There are many people with low vision in the world, and the display used by these users is often uneven. The contrast between text and background becomes the most basic functional problem for users. As a thoughtful UI component library, how can you not take care of the user's eyes?

According to the requirements of the 《Web Content Accessibility Guidelines (WCAG) 》, the color of the text, the thickness of the font, we have improved the contrast, and adjusted the algorithm of the swatch, the purpose is to make your product more accessible.

2.2 Support dark mode

In the electronics around us, night mode is supported from the operating system to browsers, editors, and various readers. It is a high-contrast, or reverse-color display mode. If your users need to use your product for a long time, having a night mode can effectively alleviate eye strain and make it easier to read.

The Dark Mode theme has been added to the default theme, and provides a full customizable option. When developing, you only need to import the corresponding style file:

import 'rsuite/lib/styles/themes/dark/index.less';

More on topic related settings can be referenced: custom theme

3、Added some components

The component is the smallest unit provided by React Suite. As Web applications become richer and more diverse, we will continue to offer a richer set of components.

3.1 Support for List

The List component is used very much on the mobile side, but in the mid- and back-end products, it has always been a component that is not well standardized. The required representations in different business scenarios will be different, so that we implement it in this version. List In addition to customizing the content of each item, we provide drag and drop sorting by default.

3.2 Support for Placeholder

In the front-end industry, everyone knows the word "skeleton screen". Its function is similar to that of Loader. It is a state displayed to the user before the application is not loaded, telling the user that the current data is being loaded. The advantage of the "skeleton screen" is to give the user a general structure of the page before the data has not been loaded, and enhance the sensory experience.

Placeholder is such a component that provides a rough structure of data. The general structure of the content area can be drawn by lines, rectangles, and circular outlines.

3.3 Support for Calendar

Calendar is a simple calendar panel that displays data for the calendar. Two usage scenarios are provided. One is to display a large calendar panel full of containers by default, which can display data for one month. The other is to provide a small, compact, small calendar panel that we often encounter in some systems' sidebars for data filtering.

3.4 Support Avatar and Badge

Support for Avatar components for displaying an avatar or trademark.
Support for Badge components for buttons, numbers next to icons, or status markers.

4、Breaking changes

We hope that each update will be most compatible with the historical version. But there are still some breaking changes, such as the use of new React features, or improvements to previously unreasonable designs.

4.1 Less than React 16.6 version is not supported

Some of React's new features are used in this release. For example, the new context API, which started to support the Class component static contextType property in React 16.6.0 #13728, uses this feature. So to use React Suite 4.0, you must upgrade react and react-dom to >=16.6.

4.2 Less compatibility change

In this release, support for the Dark theme has been made, and the introduction address of the Less file has been adjusted.

3.x version

import 'rsuite/styles/less/index.less';

4.x version

import 'rsuite/lib/styles/themes/default/index.less'

// or
// import 'rsuite/lib/styles/index.less';

The version of Less needs to be upgraded to the >=3.0 version.

4.3 TreePicker and CheckTreePicker discard the expandAll attribute

The TreePicker component and the CheckTreePicker component deprecated the expandAll property and added the expandItemValues property to expand the specified node.

4.4 Adjusted the values of `Dropdown`, `Whisper`, and all `Picker` components `placement` properties

The placement attribute is the position that the configuration selector displays after it is opened. To make the parameters more readable, the values are adjusted as follows:

type Placement4 = 'top' | 'bottom' | 'right' | 'left';
type Placement8 =
| 'bottomStart'
| 'bottomEnd'
| 'topStart'
| 'topEnd'
| 'leftStart'
| 'rightStart'
| 'leftEnd'
| 'rightEnd';
type PlacementAuto =
| 'auto'
| 'autoVerticalStart'
| 'autoVerticalEnd'
| 'autoHorizontalStart'
| 'autoHorizontalEnd';

Compatible with 3.x version

5、Bugfix and improvement

5.1 All Picker components support size

We have a very complete Picker series of components in the data entry component, which is often used in some data filtering columns, in addition to being used in forms. Considering that the Input and Button components have a size attribute that can be resized, the size attribute is also added to all Pickers to accommodate more scenarios.

5.2 Overflow protection for Whisper and Picker components

All Picker components and Whisper components are pop-up floating layers at a specified location, but sometimes because the size of the floating layer exceeds the extent of the container, some floating layers are not blocked. You can set a preventOverfow property at this time. The relative position of the floating layer display is adjusted according to the free space of the container, and the floating layer is displayed on the page as much as possible.

5.3 FormControl component read-only and plain text

FormControl adds 2 props support:

readOnly makes the form component read-only and cannot be edited.
plaintext lets the form components be displayed in plain text.

When these two properties are set on the Form component, all the form components in the form are globally set. In many cases, we need to add a data detail page to the completed form. At this time, we need to add a new module and display the data. To improve code reusability, you can turn a form into a data detail panel by setting a plaintext property on the Form component.

5.4 DatePicker and DateRangePicker support display weeks

<DatePicker showWeekNumbers />
<DateRangePicker showWeekNumbers />

If you need to view the number of weeks in your business in your business, you can set the showWeekNumbers attribute on the calendar, and the number of weeks in the current line will be displayed on the left side of the calendar.

5.5 `Form` combination `Schema` supports asynchronous check

Asynchronous verification is a basic requirement, and in this release Schema starts supporting Promise. Here are a few of the improvements to the form:

Set the checkAsync attribute on <FormControl> that requires asynchronous validation.
The validation rules for asynchronous validation add an object with a return value of Promise via the ʻaddRulemethod ofschema`.
The check can be triggered manually by calling checkAsync and checkForFieldAsync of <Form>.

Model

In the example we need to asynchronously verify that an email address already exists on the server. When adding a rule to Modal, we return a Promise object via the addRule method.

`js
function asyncCheckEmail(email) {
return new Promise(resolve => {
// Asynchronous processing logic
// resolve(true);
});
}

const model = SchemaModel({
email: StringType()
.isEmail('Please input the correct email address')
.addRule((value, data) => {
return asyncCheckEmail(value);
}, 'Email address already exists')
});
`

Form
Set the declared model on Form and set a checkAsync property for the component that needs to be verified asynchronously.

`js
const formRef = React.createRef();

function render(){
return (

)
}
`

Form provides the check() method by default, and the checkAsync() method is called if it is an asynchronous check.

`js

formRef.current.checkAsync().then(result => {
console.log(result);
});
`

5.6 Alert and Notification support close method

Both Alert and Notification support the close and closeAll methods, closing the last message and closing all messages, respectively. In some business situations, you need to turn off the warning message on the page after performing an operation. You can do the following:

`ts
Alert.close();
Alert.closeAll();

Notification.close();
Notification.closeAll();
`

5.7 FlexboxGrid supports responsive

The Col component in the Grid layout is configurable for responsive layouts, but it doesn't have some features for Flex layouts. To make the two layouts fused, we can make FlexboxGrid.Item and Col Combined, combined with FlexboxGrid and with Flex layout features, and responsive configuration-related properties.

html <FlexboxGrid.Item componentClass={Col} md={6}> content </FlexboxGrid.Item>

5.8 All Picker new open and close methods

In some cases, you need to open or close a Picker by performing an action. For example: a cascading operation, you want to quickly select after closing a Picker, the default is to put a next Picker. We provide a open and close method on Picker:

`ts
const pickerRef = React.createRef();

function render() {
return ;
}

// open
pickerRef.current.open();

// close
pickerRef.current.close();
`

5.9 Other fixes

Fixed a Uploader upload file larger than 1GB display issue.
Fixed compatibility issue with Input on IE browser display.
Fixed an issue where InputPicker on the keyboard Delete key would clear the input worth.
Fixed an issue where Dropdown set the toggleComponentClass={Button} background style error.
Fixed an issue where styles were missing when introduced on demand.
Fixed an issue where DatePicker disabled days were inconsistent with disabled months.
Fixed an issue where the scrollbar position was not updated after the Table data was updated.
Fixed the Table property expandedRowKeys update value is not controlled.
Fixed a callback parameter for the Table property onRowClick missing event.
Fixed support for focus events by the Form component.
Modified the default separator for Breadcrumb.
Fixed an issue where the position of the handle was not updated after the Slider changed from hidden to display state.

6、At last

I hope that our growth will bring a better experience to more developers.If you like React Suite, you can show your support by either

Starring this repo.
Leaving a comment here if you are using RSUITE in your project
Becoming a backer on OpenCollective

This project exists thanks to all the people who contribute.

DEV Community: 郭小铭

React Suite v6: A Steady Step Toward Modernization

1. Style System Overhaul: CSS Variables by Default

Additional Style Improvements

2. AI-Ready Documentation and Tooling

LLMs.txt

MCP Server

3. Atomic Layout Building Blocks: Box & Center

Box

Center

4. End-to-End Responsive Enhancements

5. New Components and Hooks

Components

Hooks

6. Developer Experience Improvements

7. Additional Enhancements

Get Started

React Suite 5 Release Improved Support for Accessibility 🎉

Major changes ✨

Improve accessibility

Support CSS variables

Refactoring React Class Components with Hooks

Import on Demand

Improvements to Form

Added support for srcSet, sizes,imgProps on Avatar

Added support onChangeCommitted on Slider and RangeSlider

Improvements to DatePicker and DateRangePicker

Add support for color on Badge

Improvements to Table

Add support for TagInput

Improvements to Carousel

Migration from v4 to v5

Updating your dependencies

Run codemods

Handling breaking changes

Supported browsers

Use SVG Icon instead of Icon font

date-fns upgrade v2

Alert is deprecated. Use toaster.push(<Message>) instead

Refactor Notification

Rename Form related components

Rename the componentClass property of all components to as

Disable all picker virtualized by default

Improve the way to update children asynchronously

Removed Table.Pagination, and enhanced Pagination

Replace IntlProvider with CustomProvider

Deprecate activeKey and onSelect properties of <Sidenav>

Import on Demand

Deprecate renderTitle property of <Dropdown>

Use open/close instead of show/hide.

Supporting React Suite

Table component that supports both virtualized table and tree tables

Large table virtualization

Tree Table

Install and use

Finally

React Suite 4.1.0 release, support for RTL 🎉

1、Support Right-to-left (RTL)

1.1 HTML

1.2 IntlProvider

1.3 postcss-rtl

2、Added support for Carousel

3、Panel supports Card view

3.1 Render a Card

3.2 Panel and Grid combination

4、Timeline supports more display modes

5、Add Affix component

6、Other improvements and fixes

7、At last

🎉 React Suite 4.0 release

1, migrate from Flow to TypeScript

2, accessibility improvement

2.1 Color contrast improvement

2.2 Support dark mode

3、Added some components

3.1 Support for List

3.2 Support for Placeholder

3.3 Support for Calendar

3.4 Support Avatar and Badge

4、Breaking changes

Added support `onChangeCommitted` on Slider and RangeSlider

Add support for `color` on Badge

Alert is deprecated. Use `toaster.push(<Message>)` instead

Rename the `componentClass` property of all components to `as`

Disable all picker `virtualized` by default

Removed `Table.Pagination`, and enhanced `Pagination`

Replace `IntlProvider` with `CustomProvider`

Deprecate `activeKey` and `onSelect` properties of `<Sidenav>`

Deprecate `renderTitle` property of `<Dropdown>`

Use `open/close` instead of `show/hide`.

4.4 Adjusted the values of `Dropdown`, `Whisper`, and all `Picker` components `placement` properties

5.5 `Form` combination `Schema` supports asynchronous check