freeranger / react-bootstrap-tabs

React Bootstrap 4 Tabs Component

React Tabs component using Bootstrap 4  

This is a react component to render tabs using Bootstrap 4 classes. You should have Bootstrap 4 installed already in your app.

Demo

• Demo Site
• Demo project source

All of the features are demonstrated on the demo site so please see the source file:

https://github.com/freeranger/react-bootstrap-tabs-demo/blob/master/app/App.js

for examples of how to use it in your own applications.

Usage

1. install the package:

npm install react-bootstrap-tabs --save

2. Import component

With ES2015:

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

3. Add the component markup to your react component

<Tabs onSelect={(index, label) => console.log(label + ' selected')}>
    <Tab label="Tab1">Tab 1 content</Tab>
    <Tab label="Tab2">Tab 2 content</Tab>
</Tabs>

Developing

1. Clone this repo
2. Inside cloned repo run npm install
3. If you want to run tests: npm test or npm run testonly or npm run test-watch. Write tests in the tests folder. You need at least Node 4 on your machine to run tests.
4. If you want to run linting: npm test or npm run lint. Fix bugs: npm run lint-fix. You can adjust your .eslintrc config file.
5. If you want to run transpilation to ES5 in dist folder: npm run prepublish (standard npm hook).

License

MIT

react-bootstrap-tabs's Issues

tabs are not showing title/Tab name, what is the issue?

Code:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Tab, Tabs, TabList, TabPanel} from 'react-bootstrap-tabs';

const tabsInstance = (

Tab 1 content

Tab 2 content

Tab 3 content
);
class ProfileTab extends Component {
constructor(props){
super(props);

}
render(){
return (

{tabsInstance}

);
}
}

export default ProfileTab;

mis-spelling on install call

Hi there,

you're missing a 't' in 'bootstrap' in your readme install instructions:

npm install react-boostrap-tabs --save

cheers,

Uili

Hi, I'm facing design issue in mobile version when tab is disabled it hides the text but not the "<li>" parent tag.

I've tried applying "style" tag to as well but that also seem not to be working.

componentWillReceiveProps will eventually be deprecated.

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

how to change tabs with button click event?

i want to change the tabs on button click event using RECATJS function, there is no explanation for that in documentation.

React 16 peer dependency

Could you upgrade peer dependency to support React 16?

Pointer mode hover tab not in pointing mode

The pointer hover tab is not in pointing mode (but cursor one). Is this normal ?

Set Default Tab

Is there any way to set default tab? I want the tab 2 to be selected when the component is loaded intially.

onSelect property not working

I am using Tabs with react and redux but onSelect doesn't work.
I am displaying data dynamically from redux store in each tabs.
The tab data changes after double click on Tabs Header.
Is there any solution for this?

EventKey Callback argument does not match type of EventKey

Closing this issue - wrong repo