Security News
Python Overtakes JavaScript as Top Programming Language on GitHub
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
react-tabs
Advanced tools
The react-tabs package is a simple and flexible tab component for React applications. It allows developers to create tabbed interfaces with ease, providing a straightforward API and customizable components.
Basic Tabs
This feature allows you to create a basic tabbed interface with multiple tabs and corresponding content panels.
import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
function App() {
return (
<Tabs>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanel>
<h2>Content for Tab 1</h2>
</TabPanel>
<TabPanel>
<h2>Content for Tab 2</h2>
</TabPanel>
<TabPanel>
<h2>Content for Tab 3</h2>
</TabPanel>
</Tabs>
);
}
Custom Styling
This feature demonstrates how to apply custom styling to the tabs by using a custom CSS file.
import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
import './custom-tabs.css';
function App() {
return (
<Tabs>
<TabList>
<Tab className="custom-tab">Tab 1</Tab>
<Tab className="custom-tab">Tab 2</Tab>
<Tab className="custom-tab">Tab 3</Tab>
</TabList>
<TabPanel>
<h2>Content for Tab 1</h2>
</TabPanel>
<TabPanel>
<h2>Content for Tab 2</h2>
</TabPanel>
<TabPanel>
<h2>Content for Tab 3</h2>
</TabPanel>
</Tabs>
);
}
Dynamic Tabs
This feature shows how to create dynamic tabs that can be added or removed at runtime.
import { useState } from 'react';
import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
function App() {
const [tabs, setTabs] = useState([
{ title: 'Tab 1', content: 'Content for Tab 1' },
{ title: 'Tab 2', content: 'Content for Tab 2' }
]);
const addTab = () => {
setTabs([...tabs, { title: `Tab ${tabs.length + 1}`, content: `Content for Tab ${tabs.length + 1}` }]);
};
return (
<div>
<button onClick={addTab}>Add Tab</button>
<Tabs>
<TabList>
{tabs.map((tab, index) => (
<Tab key={index}>{tab.title}</Tab>
))}
</TabList>
{tabs.map((tab, index) => (
<TabPanel key={index}>
<h2>{tab.content}</h2>
</TabPanel>
))}
</Tabs>
</div>
);
}
React-Bootstrap is a popular library that provides Bootstrap components as React components. It includes a Tabs component that offers similar functionality to react-tabs but with the added benefit of Bootstrap's styling and theming capabilities.
Material-UI is a comprehensive library of React components that implement Google's Material Design. It includes a Tabs component that provides similar functionality to react-tabs, along with a wide range of other UI components and customization options.
Semantic UI React is the official React integration for Semantic UI. It includes a Tab component that offers similar functionality to react-tabs, with the added benefit of Semantic UI's declarative syntax and extensive theming options.
Accessible react tab component
Supports React 0.14 and 15
This is the documentation for 1.0 if you are looking for the documentation for version 0.8 please got to this page
$ yarn add react-tabs
You can also still use npm
npm install react-tabs --save
Or use directly in your html as UMD component
<script src="https://unpkg.com/react-tabs@1.0.0/dist/react-tabs.min.js" />
https://reactcommunity.org/react-tabs/example/
(TODO: This demos are outdated and use super old versions of react and react-tabs)
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
export default () => (
<Tabs>
<TabList>
<Tab>Title 1</Tab>
<Tab>Title 2</Tab>
</TabList>
<TabPanel>
<h2>Any content 1</h2>
</TabPanel>
<TabPanel>
<h2>Any content 2</h2>
</TabPanel>
</Tabs>
);
react-tabs consists of 4 components which all need to be used together.
If you specify additional props on the <Tabs />
component they will be forwarded to the rendered <div />
.
string | Array<string> | { [string]: boolean }
default:
"PropTypes"
Provide a custom class name for the outer <div />
of the tabs.
You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of classnames on how to supply different class names.
boolean
default:
false
If set to true
the tabs will be focused on initial render. This allows immediate use of keyboard keys to switch tabs after the first render.
number
default:
0
This allows changing the tab that should be open on initial render. This is a zero-based index, so first tab is 0
, second tab is 1
, ...
This can only be used in uncontrolled mode when react-tabs handles the current selected tab internally and for this reason cannot be used together with
selectedIndex
. See here for more info on modes.
string
default:
"ReactTabs__Tab--disabled"
Provide a custom class name for disabled tabs.
This option can also be set directly at the
<Tab />
component.
boolean
default:
false
By default only the current active tab will be rendered to DOM. If set to true
all tabs will be rendered to the DOM always.
This can also be enabled for each individual
<TabPanel />
component with its propforceRender
.
(index: number, lastIndex: number, event: Event) => ?boolean
default:
undefined
This event handler is called every time a tab is changed. It will be called with the index
that will be changed to, the lastIndex
which was selected before and the underlying event
which is usually either a keydown
or click
event.
The callback can optionally return true
to cancel the change to the new tab.
Returning
true
when the change to the new tab should be canceled is also important in controlled mode, as react-tabs still internally handles the focus of the tabs. (Really? maybe find a better way)
In controlled mode ths
onSelect
handler is required prop.
number
default:
null
Set the currently selected tab. This is a zero-based index, so first tab is 0
, second tab is 1
, ...
This enables controlled mode, which also requires onSelect
to be set. See here for more info on modes.
string
default:
"ReactTabs__Tab--selected"
Provide a custom class name for the active tab.
This option can also be set directly at the
<Tab />
component.
string
default:
"ReactTabs__TabPanel--selected"
Provide a custom class name for the active tab panel.
This option can also be set directly at the
<TabPanel />
component.
If you specify additional props on the <TabList />
component they will be forwarded to the rendered <ul />
.
string | Array<string> | { [string]: boolean }
default:
"PropTypes__TabList"
Provide a custom class name for the <ul />
.
You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of classnames on how to supply different class names.
If you specify additional props on the <Tab />
component they will be forwarded to the rendered <li />
.
string
default:
"ReactTabs__Tab--disabled"
Provide a custom class name for disabled tabs.
string | Array<string> | { [string]: boolean }
default:
"PropTypes__Tab"
Provide a custom class name for the <li />
.
You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of classnames on how to supply different class names.
string
default:
"ReactTabs__Tab--selected"
Provide a custom class name for the active tab.
If you specify additional props on the <TabPanel />
component they will be forwarded to the rendered <dev />
.
string | Array<string> | { [string]: boolean }
default:
"PropTypes__TabPanel"
Provide a custom class name for the <div />
containing the tab content.
You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of classnames on how to supply different class names.
boolean
default:
false
By default the tab content will only be rendered when the tab is active. If set to true
the tab will also be rendered if inactive.
This can also be enabled for all
<TabPanel />
components with the propforceRenderTabPanel
on<Tabs />
.
string
default:
"ReactTabs__TabPanel--selected"
Provide a custom class name for the active tab panel.
React tabs has two different modes it can operate in, which change the way how much you need to take care about the state yourself.
This is the default mode of react-tabs and makes the react-tabs components handle its state internally. You can change the starting tab with defaultIndex
and you can listen for changes with onSelect
.
In this mode you cannot force a tab change during runtime.
<Tabs defaultIndex={1} onSelect={index => console.log(index)}>
<TabList>
<Tab>Title 1</Tab>
<Tab>Title 2</Tab>
</TabList>
<TabPanel></TabPanel>
<TabPanel></TabPanel>
</Tabs>
This mode has to be enabled by supplying selectedIndex
to the <Tabs />
component.
In this mode react-tabs does not handle any tab selection state internally and leaves all the state management up to the outer application.
This mode als enforces you to set a handler for onSelect
. defaultIndex
does not have any effect and will therefore throw an error.
class App extends Component {
constructor() {
this.state = { tabIndex: 0 };
}
render() {
return (
<Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
<TabList>
<Tab>Title 1</Tab>
<Tab>Title 2</Tab>
</TabList>
<TabPanel></TabPanel>
<TabPanel></TabPanel>
</Tabs>
);
}
}
react-tabs does not include any style loading by default. Default stylesheets are provided and can be included in your application if desired.
When using webpack and a appropriate loader (css-loader
, sass-loader
, less-loader
or style-loader
) you can simply import the default stylesheet.
import 'react-tabs/style/react-tabs.css';
// or
import 'react-tabs/style/react-tabs.scss';
// or
import 'react-tabs/style/react-tabs.less';
When using SASS you can easily import the default styles
@import '../../path/to/node_modules/react-tabs/style/react-tabs.scss';
When using LESS you can easily import the default styles
@import '../../path/to/node_modules/react-tabs/style/react-tabs.less';
You can also always just simply copy the default style to your own css/scss/less and modify it to your own needs. The changelog will always tell you when classes change and we also consider changes that break the styling as semver major.
MIT
FAQs
An accessible and easy tab component for ReactJS
The npm package react-tabs receives a total of 729,713 weekly downloads. As such, react-tabs popularity was classified as popular.
We found that react-tabs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
Security News
Dutch National Police and FBI dismantle Redline and Meta infostealer malware-as-a-service operations in Operation Magnus, seizing servers and source code.
Research
Security News
Socket is tracking a new trend where malicious actors are now exploiting the popularity of LLM research to spread malware through seemingly useful open source packages.