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
fileListVisibleproperty, which defaults totrueand is set tofalseto 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
sideEffectsconfiguration error caused the style file to be lost. - Fixed an issue where menus were not rendered when
stickywas 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
Top comments (1)
I have just checked the suite, and it's amazing considering how well it is designed and the number of features and components it has, definitely going to utilize it in my future projects.