React.js Blueprint Component Tabs Props

Last Updated : 29 Aug, 2022

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 Tabs Component allows the user to navigate between options in form of tabs.

Blueprint Component Tabs Props:

children: The Tab items serve as the children for this component.
className: It is a space-delimited list of class names to pass along to a child element.
animate: It is a boolean value. It defines whether the selected tab indicator should animate its movement. It is true by default.
defaultSelectedTabId: It defines Initial selected tab id, for uncontrolled usage. Note that this prop refers only to <Tab> children; other types of elements are ignored.
id: It denotes a unique identifier for this Tabs container.
large: It is a boolean value. If set to true, the tab titles will display with larger styling. This will apply large styles only to the tabs at this level, not to nested tabs. It is true by default.
onChange: It is a void callback function that is invoked when a tab in the tab list is clicked.
renderActiveTabPanelOnly : It is a boolean value. It defines whether inactive tab panels should be removed from the DOM and unmounted in React or not.
selectedTabId: It defines the selected tab id, for controlled usage.
vertical: It is a boolean value. It defines whether to show tabs stacked vertically on the left side or not.

Syntax:

<Tabs></Tabs>

Prerequisite:

Introduction and installation ReactJS
React Hook useState

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 Tabs, Tab, 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 the <Tabs> components, within it we are adding two Tab Components passing id, panel, and title props to it. To all the Tabs components we are adding classNames, defaultSelectedTabId,onChange function named onHandleChange that shows the tab we have selected in the alert, and renderActiveTabPanelOnly prop.

App.js

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Tabs, Tab, Classes } from "@blueprintjs/core"; 
  
function App() { 
    const onHandleChange = (e) => { 
        alert(e); 
    }; 
    return ( 
        <div className="App" style={{ marginLeft: 10 }}> 
            <h4>React.js BluePrint Component Tabs Props</h4> 
  
            <Tabs 
                className={Classes.ELEVATION_0} 
                defaultSelectedTabId="2"
                onChange={onHandleChange} 
                renderActiveTabPanelOnly={true} 
            > 
                <Tab id="1" title="Articles" 
                    panel={<p>Let's read some Articles</p>} /> 
                
                <Tab id="2" title="Courses" 
                    panel={<p>Explore Courses ...</p>} /> 
            </Tabs> 
        </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: To the above code we are further 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 to the large, animate, vertical props.

App.js

import React, { useState } from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Tabs, Tab } from "@blueprintjs/core"; 
  
function App() { 
    const [selectBool, setSelectBool] = useState(false); 
  
    const onHandleChange = () => { 
        setSelectBool(!selectBool); 
    }; 
    return ( 
        <div className="App" style={{ marginLeft: 10 }}> 
            <h4>React.js BluePrint Component Tabs Props</h4> 
            <p> 
                <b style={{ marginLeft: 30 }}> 
                    animate, vertical, large ? 
                </b> 
                <button 
                    onClick={onHandleChange} 
                    style={{  
                        marginLeft: 10,  
                        fontSize: 15,  
                        padding: 10  
                    }} 
                > 
                    {"" + selectBool} 
                </button> 
            </p> 
  
            <Tabs animate={selectBool}  
                vertical={selectBool} large={selectBool}> 
                <Tab id="1" title="Articles" 
                    panel={<p>Let's read some Articles</p>} /> 
                <Tab id="2" title="Courses" 
                    panel={<p>Explore Courses ...</p>} /> 
            </Tabs> 
        </div> 
    ); 
} 
  
export default App;