rtl support and configuration with semantic ui react

Question

I am using Semantic UI lib for react https://react.semantic-ui.com/introduction. and create-react-app boilerplate https://github.com/facebook/create-react-app. My app requires RTL support especially for the Step component. while researching for a solution i found that semantic ui have a config file semantic.json where i can define RTL but i can't warp the whole thing together. does anyone have any recommendation or best practice for that?

score 3 · Answer 1 · answered Jan 25 '20 at 08:42

3

you can use this

.ui * {
    direction: rtl;
    text-align: right;
  }

answered Jan 25 '20 at 08:42

Ibrahim Musa

31
4

score 2 · Answer 2 · answered Mar 02 '18 at 16:24

2

The RTL support is a function of the semantic-ui CSS styles and should not have anything to do with semantic-ui-react. If you compile your own styles using the build tools in semantic-ui then use those styles in your project, they will work.

If you don't want to compile your own RTL styles, I believe this CDN is hosting a compiled RTL version of the CSS:

http://rtlcss.com/cdn/css-frameworks/semantic-ui/

answered Mar 02 '18 at 16:24

brianespinosa

2,408
12
22

Thanks for your answer. In the end I build Semantic RTL style in separate project and then use it as a static file in my project . – onn Mar 03 '18 at 20:41
@onn glad to hear you took the first option to solve this by compiling your own styles. Please consider marking the answer correct if it was the right one. – brianespinosa Mar 07 '18 at 02:46

score 2 · Answer 3 · answered Feb 05 '20 at 07:29

If you want to use semantic-ui in reactjs in RTL language such (Persian/Arabic), you can follow below steps.

With cdn

First install semantic-ui for reactjs:

npm i semantic-ui-react

Then install semantic-ui css:

npm i semantic-ui-css

Now include semantic-ui rtl in index.html (just css)

Semantic UI RTL

<link
  rel="stylesheet"
  href="https://cdn.rtlcss.com/semantic-ui/2.4.1/semantic.rtl.min.css"
  integrity="sha384-yXUIpeQfH3cuk6u6Mwu8uyJXB2R3UOLvcha1343UCMA2TA7lQ14BFmrudI6LAP8A"
  crossorigin="anonymous">

Without cdn (Recommended)

If you don't want use cdn, just download css file go to this path:

node_modules/semanti-ui-css/

Put this css here, where semantic.css is, then include this:

import 'semantic-ui-css/semantic.rtl.min.css';

This method tested and already work fine, if anyone had issue, feel free to comment and I'll respond.

installing npm package (semantic-ui-css) is useless in your solution as you'll end up using the CDN version (through cdn or by downloading it locally) — Osama_Almaani, Sep 09 '20 at 15:54

rtl support and configuration with semantic ui react

3 Answers3