React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building complex data-dense interfaces for desktop applications.
ReactJs Blueprint Popover2 component makes the content associated with a target element appear floating on the screen.
The ReactJs Blueprint Popover2 component has a max-width by default but not anything as max-height it defines the height of the popover on the basis of the content added. We can change the height of the popover by creating our own class in which we can define the max height and can also make it scrollable.
Syntax:
<Popover2 content={div className="GFG">...</div>}>
...
</Popover2>
// CSS Styles
.GFG {
...
}
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 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”.
To the Popover2 Component in the content, we have created a div and added className custom. We have added the name of the countries starting with ‘A’ as the content.
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" style={{ margin: "10px" }}> <h3> React Blueprint Popover2 Style Sizing</h3> <div> <Popover2 content={ <div className="custom"> <h4> List of Countries starting with{" "} <span style={{ color: "green" }}> A </span>: </h4> <ul> <li value="Åland Islands"> Åland Islands </li> <li value="Albania"> Albania </li> <li value="Algeria"> Algeria </li> <li value="American Samoa"> American Samoa </li> <li value="Andorra"> Andorra </li> <li value="Angola"> Angola </li> <li value="Anguilla"> Anguilla </li> <li value="Antarctica"> Antarctica </li> <li value="Antigua and Barbuda"> Antigua and Barbuda </li> <li value="Argentina"> Argentina </li> <li value="Armenia"> Armenia </li> <li value="Aruba"> Aruba </li> <li value="Australia"> Australia </li> <li value="Austria"> Austria </li> </ul> </div> } renderTarget={({ isOpen, ref, ...targetProps }) => ( <Button {...targetProps} elementRef={ref} text="Click me" style={{ marginTop: "40px" }} /> )} /> </div> </div> ); } export default App; |
Creating the className custom and adding margin-top,max-height, and overflow-y to it.
index.css
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } /* Custom class */.custom { margin-top: 30px; max-height: 85px; overflow-y: auto; } |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: In this example, we are changing the content to the list of fruits and adding the className custom to the div.
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" style={{ margin: "10px" }}> <h3> React Blueprint Popover2 Style Sizing</h3> <div> <Popover2 content={ <div className="custom"> <h4>List of Fruits :</h4> <ol> <li value="Apple"> Apple </li> <li value="Pear"> Pear </li> <li value="Raspberry"> Raspberry </li> <li value="Blackberry"> Blackberry </li> <li value="Strawberry"> Strawberry </li> <li value="Tomato"> Tomato </li> <li value="Peach"> Peach </li> <li value="Cherry"> Cherry </li> </ol> </div> } renderTarget={({ isOpen, ref, ...targetProps }) => ( <Button {...targetProps} elementRef={ref} text="Click me" intent="primary" style={{ marginTop: "40px" }} /> )} /> </div> </div> ); } export default App; |
Creating the className custom and adding max-width,margin-top,max-height, and overflow-y to it.
index.css
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } /* Custom class */.custom { max-width: 120px; margin-top: 30px; max-height: 95px; overflow-y: auto; } |
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.sizing
