3 October 2016

Tabs in ReactJS or React.js Using React Bootstrap

Hi Friends,

As I have mentioned in this post that the tabs in React application can be created in two ways.

1. By using react-tabs library
2. By using react-bootstrap

Since we have already see the first method in this post so we will see now the second method i.e. by using  react-bootstrap.

To use the bootstrap feature given by ReactJS, we need to install the library related to this.  To install it we need to run the following command in command prompt window:

npm install react-bootstrap --save

Then you have to import this library in your code as follows:

import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';

Once it is imported you can write you component class as shown below:

import React from "react";
import ReactDOM from "react-dom";
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';

var TabApp = React.createClass({
 getInitialState: function() {
    return {
    activePage: 1
 handleSelect(eventKey) {
     var activePageNum=this.state.activePage;
    console.log("Active page ====>"+activePageNum);
    console.log("Event Kay ====>"+eventKey);
            activePage: eventKey
componentDidMount: function() {
  this.setState({activeKey: 1});
   render: function(){

        return ( <div><Nav bsStyle="tabs" activeKey={this.state.activePage} onSelect={this.handleSelect}>
            <NavItem eventKey={1} >Tab1</NavItem>
            <NavItem eventKey={2}>Tab2</NavItem>
            <NavItem eventKey={3}>Tab3</NavItem>
        <div><p>Tab selected {this.state.activePage} </p></div>



Your HTML code will be as follows:

<!DOCTYPE html>
  <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <div id="container"></div>
  <script src="output/myCode.js"></script>


Once you run your page you can see the following screen:

So you can see the tabs and their contents in the above screenshot.

Happy Coding :)


No comments:

Post a comment