3 October 2016

Tabs in ReactJs or React.js

Hi Friends,

In this post I am going to show you how you can create the tabs in your ReactJS application. To create the ReactJS tab we need to install all the required library for it.

Tabs in ReactJS application can be created in two ways:

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

In this blog we will see how we can create the tab using react-tabs library. In the next post we will see how we can create the tab using react-bootstrap. To create the ReactJS tab using react-tabs, we need to install it first.

To install this we need to run the following command :

npm install react-tabs --save

Once it will be installed, you need to import this in your application as follows:

  import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

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

import React from "react";
import ReactDOM from "react-dom";
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

var TabApp = React.createClass({
 getInitialState: function() {
    return {
    activePage: 0
    };
  },
 handleSelect(index, last) {
     var activePageNum=this.state.activePage;
    console.log("Last Tab selected ====>"+last);
    console.log("New Tab Selected ====>"+index);
        this.setState({
            activePage: index
        });
    },
componentDidMount: function() {
  this.setState({activeKey: 0});
  },
   render: function(){

        return ( <Tabs
        onSelect={this.handleSelect}
        selectedIndex={this.state.activePage}>

        <TabList>
          <Tab>Tab1</Tab>
          <Tab>Tab2</Tab>
          <Tab>Tab3</Tab>
        </TabList>

        <TabPanel>
          <h2>Hello from Tab1</h2>
        </TabPanel>
        <TabPanel>
          <h2>Hello from Tab2</h2>
        </TabPanel>
        <TabPanel>
          <h2>Hello from Tab3</h2>
        </TabPanel>
      </Tabs>);
     }

 });


ReactDOM.render(
 <TabApp/>,
     document.querySelector("#container")
);

 


Your HTML code will be as follows:

<!DOCTYPE html>
<html>
<head>
  <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>
</head>
<body>
  <div id="container"></div>
  <script src="output/myCode.js"></script>
</body>
</html>


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
































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

Now we will see the method to create the tabs using react-bootstrap in the next post.

Till then happy Coding :)

0 on: "Tabs in ReactJs or React.js"