React.js Blueprint Popover2 Style Dark theme

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.

ReactJs Blueprint Popover2 component makes the content associated with a target element appear floating on the screen. To add the dark theme to the component we add   popoverClassName=”bp4-dark”  to the Popover2 Component.

Syntax:

 <Popover2
   popoverClassName="bp4-dark"
/>

Prerequisite:

• Introduction and Installation reactJS
• ReactJS Blueprint Popover2 Component

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 then install create-react-app globally by using the command npm -g create-react-app or can 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
npm install @blueprintjs/popover2

Project Structure: It will look like this:

Example 1: We are importing the Popover2  Component from “@blueprintjs/popover2” and the Button Component from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.

We are creating a div with backgroundColor “black” and within it, we are adding the Popover2 Component. To the Popover2 Component in the content, we have created a div with the text “Welcome to Geeksforgeeks …” and added popoverClassName=”bp4-dark”.

App.js

import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/core/lib/css/blueprint.css";

function App() {
  return (
    <div className="App">
      <h4> React Blueprint Popover2
        Style Dark theme
      </h4>

      <div style={{ backgroundColor: "black",
          padding: "80px 10px" }}>
        <Popover2
          popoverClassName="bp4-dark"
          content={
            <div>
              <h2>Welcome to Geeksforgeeks ...</h2>
            </div>
          }
          renderTarget={({ isOpen, ref, ...targetProps }) => (
            <Button
              {...targetProps}
              elementRef={ref}
              intent="primary"
              text="Click me !"
            />
          )}
        />
      </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 creating a state theme using react hook useState. We are creating a dropdown with some options and adding an onChange function selectHandle, that sets the state theme. To the parent div className, we are passing the theme. The popover2 component inherits the theme of its parent div.

App.js

import { useState } from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/core/lib/css/blueprint.css";

function App() {
  const [theme, setTheme] = useState("");
  const selectHandle = (e) => {
    setTheme(e.target.value);
  };
  return (
    <div className="App">
      <h3> React Blueprint Popover2
        Style Dark theme
      </h3>

      <label> Theme : </label>

      <select onChange={selectHandle}>
        <option value="light">light</option>
        <option value="bp4-dark">dark</option>
      </select>

      <div
        className={theme}
        style={{ backgroundColor: "green", padding: "80px 10px" }}
      >
        <Popover2
          content={
            <div>
              <h2>Welcome to Geeksforgeeks</h2>
              <p>Let's begin ...</p>
            </div>
          }
          renderTarget={({ isOpen, ref, ...targetProps }) => (
            <Button {...targetProps} elementRef={ref}
              text="Click me !"
            />
          )}
        />
      </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/#popover2-package/popover2.dark-theme