React.js Blueprint Typography Lists Internationalization

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint Typography Lists Internationalization. Typography is used to add text in various different ways to design a web page. The React.js Blueprint provides different types of typography that can be used while developing a web application. Blueprint allows using international strings to add to the web page and also allows to change the text start position i.e, from right to left.

React.js BluePrint Typography Lists Internationalization class:

• bp4-rtl: This class is used as an Internationalization class which converts the international languages lists to right to left format.

Syntax:

<p class="bp4-rtl">
    ...
</p>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure:

Example 1: The below example demonstrates the usage of the Arabic language.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";

function App() {
    return (
        <center>
            <div style={{ padding: 20, textAlign: "center",
                color: "green" }}>
                <h1>
                    ReactJS BluePrint Typography Lists
                    Internationalization
                </h1>
            </div>
            <div style={{ padding: 20 }}>
                <p>
                    لكل لأداء بمحاولة من. مدينة
                    الواقعة يبق أي, وإعلان وقوعها، حول كل, حدى
                    عجّل مشروط الخاسرة قد.
                    من الذود تكبّد بين, و لها واحدة الأراضي. عل
                    الصفحة والروسية يتم,
                    أي للحكومة استعملت شيء. أم وصل زهاء اليا
                </p>
            </div>
        </center>
    );
}

export default App;

Output:

Note: In the above output, the text starts as normal i.e, from the center.

Example 2: The below example demonstrates the Arabic language usage in right-to-left text format.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";

function App() {
    return (
        <center>
            <div style={{ padding: 20, textAlign: "center",
                color: "green" }}>
                <h1>
                    ReactJS BluePrint Typography Lists
                    Internationalization
                </h1>
            </div>
            <div style={{ padding: 20 }}>
                <p class="bp4-rtl">
                    لكل لأداء بمحاولة من. مدينة
                    الواقعة يبق أي, وإعلان وقوعها، حول كل, حدى
                    عجّل مشروط الخاسرة قد. من
                    الذود تكبّد بين, و لها واحدة الأراضي. عل
                    الصفحة والروسية يتم,
                    أي للحكومة استعملت شيء. أم وصل زهاء اليا
                </p>
            </div>
        </center>
    );
}

export default App;

Output:

Note: In the above output, the text starts from the right and goes to the left.

Reference: https://blueprintjs.com/docs/#core/typography.internationalization