React.js Blueprint Typography Running text

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 Running text. 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. Running text is used to add long-form text, such as rendered Markdown documents as it provides increased spacing and support for unclassed textual elements.

React.js BluePrint Typography UI text class:

• .bp4-running-text: This class is used to add a long form of text and provides increased spacing in the texts.

Syntax:

<div class="bp4-running-text">
    <p>...<p>
    <h1>...</h1>
</div>

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: Below example demonstrates the usage of running text in <h1> tag and <p> tags of typography.

Javascript

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

function App() {
    return (
        <div style={{ padding: 20, textAlign: "center",
            color: "green" }}>
            <h1>
                ReactJS Blueprint Typography Running Text
            </h1>
            <div class="bp4-running-text"
                style={{ color: "black" }}>
                <h1 >Welcome to GeeksforGeeks</h1>
                <p class="bp4-text-large">GeeksforGeeks
                is a platform where you can find technical
                articles and tutorials.It also provides a
                variety of coding problems and contests
                to learn with.
                </p>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the usage of running text in lists of typography.

Javascript

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

function App() {
    return (
        <div style={{ padding: 20, textAlign: "center",
            color: "green" }}>
            <h1>
                ReactJS Blueprint Typography Running Text
            </h1>
            <div class="bp4-running-text"
                style={{ color: "black" }}>
                <h3>GeeksforGeeks Courses</h3>
                <ol>
                    <li>DSA Course</li>
                    <li>C++ Self-Paced Course</li>
                    <li>Java Self-Paced Course</li>
                </ol>
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/typography.running-text