React.js Blueprint Action

Blueprint is a React.js UI toolkit that provides a wide range of customizable and well-designed icons. Blueprint Action is a part of this toolkit that provides a visual way to indicate the actions that the user can take. We can use the following procedure below to use Blueprint Action icons in your project.

Blueprint Action Icons can be used in various ways such as buttons, menus, tables, and more, the syntax to use blueprint action is quick and easy as it follows a standard pattern.

Syntax:

<Icon icon="ICON_NAME" intent="INTENT_NAME" />

In the syntax, as shown above, the “ICON_NAME” is replaced with the name of the icon you want to use, and the “INTENT_NAME” is used to define the color of the hero and it can be set to various options such as primary, danger, success and warning.

Creating React Applications and Installing Modules:

Step 1: Create a React App using the following command.

npx create-react-app appname

Step 2: After the npm has created the react app in your current directory we can move to it using the following command.

cd appname

Step 3: Once we have moved to the app’s directory To use the blueprint action we need to install the @blueprintjs/core package which contains the blueprint action using a package manager such as npm or yarn.

npm install @blueprintjs/core

Once this package is installed we can use Blueprint action in our project.

Project Structure:

Example 1: Now let’s look at an example using the Blueprint Action icons in the button to indicate an action that the user can take. In this example, we will create a ‘+’ icon to add the item to the list.

App.js

Javascript

import "./styles.css";
import { Button, Icon } from '@blueprintjs/core';

function AddItemButton() {
    return (
        <Button intent="primary">
            Add Item <Icon icon="plus" />
        </Button>
    );
}

export default function App() {
    return (
        <div className="App">
            <h1>Geeks for Geeks</h1>
            <h2>Article on React.js Blueprint action</h2>
            {AddItemButton()}
        </div>
    );
}

In the above code, we have imported a button and plus icon from the blueprint module with intent as primary here ‘+’ icon represents the action the button will do on click.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the button with a ‘+’ sign to add the item to your list.

Example 2: Now let’s look at an example using the Blueprint Action play and pause icons, In this example, we’ll create a button that toggles between two icons, a “play” icon, and a “pause” icon, when clicked.

App.js

Javascript

import { useState } from "react";
import { Button, Icon } from "@blueprintjs/core";

function PlayPauseButton() {
    const [isPlaying, setIsPlaying] = useState(false);

    const handleClick = () => {
        setIsPlaying(!isPlaying);
    };

    return (
        <Button onClick={handleClick}>
            {isPlaying ? <Icon icon="pause" /> : <Icon icon="play" />}
        </Button>
    );
}

function App() {
    return (
        <div className="App">
            <h1>Geeks for Geeks</h1>
            <h2>Article on React.js Blueprint action</h2>
            <PlayPauseButton />
        </div>
    );
}

export default App;

In this example, we have created a functional component PlayPauseButton which consists of a Button that changes on click to play and pause with the help of estate.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see that on clicking the button it toggles between play and pause:

Reference: https://blueprintjs.com/docs/#icons