My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

React Suite 4.1.0 release, support for RTL 🎉

漆工's photo
漆工
·Nov 19, 2019

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.

a547f2131c636e1432a7c194c5b9f8ba.png

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.

6dd174d0c6324bffac9686d7660d7bda.png

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

0d9abcf9d982af8ed8b0e7aea707fdb8.png

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

1b29f08b85e56185a3d0bcf6291d2644.png

4、Timeline supports more display modes

09425ae078ee182bc9d8d229ed125ab2.png

  • 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