Open In App

React.js BluePrint Text Component Props

Improve
Improve
Like Article
Like
Save
Share
Report

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. 

React.js Blueprint Text Component provides a way for users to add accessible overflow behavior to a line of text.

BluePrint Text Component Props:

  • className: It is a space-delimited list of class names to pass along to a child element.
  • ellipsize: It indicates whether this component should be truncated with an ellipsis if it overflows its container or not.
  • tagName: It denotes the HTML tag name to use for the rendered element.
  • title: It denotes the HTML title for the element.

Syntax:

<Text></Text>

Prerequisite: Introduction and installation ReactJS
 

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

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

cd project

Step 3:  now install the dependency by using the following command:

npm install @blueprintjs/core

Project Structure: It will look like this:

 

Example 1: We are importing the Text, and Classes from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”. We are adding three <Text> components. To the first component, we kept as it is. For the second Text Component, we are passing ‘a element to the tagName prop and Classes.ELEVATION_0 to the className. And for the third Text Component, we are passing ’em’ element to the tagName prop and Classes.ELEVATION_4 to the className.

App.js




import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Text, Classes } from "@blueprintjs/core";
  
function App() {
    return (
        <div
            style={{
                marginLeft: 10,
            }}
        >
            <h4>ReactJS Blueprint Text Component</h4>
            <div>
                <Text>Welcome to GeeksforGeeks!</Text>
                <Text tagName="a" 
                    className={Classes.ELEVATION_1}>
                    Welcome to GeeksforGeeks!
                </Text>
                <br />
                <Text tagName="em" 
                    className={Classes.ELEVATION_4}>
                    Welcome to GeeksforGeeks!
                </Text>
            </div>
        </div>
    );
}
  
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Example 2:  We are wrapping the Text Component within a  div, adding some inline style. We are adding a button with a label as the state-defined selectBool created using react hook useState, added an onClick function that will call the onHandleChange function that will change the current state of the selectBool. We are passing the selectBool state to the ellipsize prop.

App.js




import React, { useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Text, Classes } from "@blueprintjs/core";
  
function App() {
    const [selectBool, setSelectBool] = useState(false);
  
    const onHandleChange = () => {
        setSelectBool(!selectBool);
    };
    return (
        <div
            style={{
                marginLeft: 10,
            }}
        >
            <h4>ReactJS Blueprint Text Component</h4>
            <p>
                <b style={{ marginLeft: 30 }}>ellipsize ?</b>
                <button
                    onClick={onHandleChange}
                    style={{ 
                        marginLeft: 10, 
                        fontSize: 15, 
                        padding: 10 
                    }}
                >
                    {"" + selectBool}
                </button>
            </p>
            <div style={{
                width: 200, height: 100,
                backgroundColor: "lightgreen"
            }}>
                <Text ellipsize={selectBool} >
                    Welcome to GeeksforGeeks!
                    Welcome to GeeksforGeeks!
                    Welcome to GeeksforGeeks!
                    Welcome to GeeksforGeeks!
                    Welcome to GeeksforGeeks!
                    Welcome to GeeksforGeeks!
                </Text>
            </div>
        </div>
    );
}
  
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Reference: https://blueprintjs.com/docs/#core/components/text.props



Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads