react-content-tabs

Documentation

Installation

React Content Tabs can be installed by running either of the following commands in your terminal:

npm install react-content-tabs --D

yarn add react-content-tabs

With the package installed, it can be imported into a React project.

import ReactContentTabs from 'react-content-tabs';

Once imported, the component can be used by adding it into the JSX with the required props and any additional options.

render() {
  return (
    <Tabs.Tabs>
      <Tabs.TabBar>
        <Tabs.Tab tabFor="upcoming">Upcoming</Tabs.Tab>
        <Tabs.Tab tabFor="completed">Completed</Tabs.Tab>
        <Tabs.Tab tabFor="calendar">Calendar</Tabs.Tab>
      </Tabs.TabBar>
 
      <Tabs.ContentWrapper>
        <Tabs.Content id="upcoming">Upcoming content.</Tabs.Content>
        <Tabs.Content id="completed">Completed content.</Tabs.Content>
        <Tabs.Content id="calendar">Calendar content.</Tabs.Content>
      </Tabs.ContentWrapper>
    </Tabs.Tabs>
  );
}

Options

Tabs.Tabs
Prop	Type	Default	Desc
theme	object	{}	The theme prop allows the passing of an object of CSS colors to override the default theme of the component.

theme={{
  base: '#fff',
  disabled: '#939393',
  inactive: '#000',
  primary: '#e92525',
  secondary: '#C8C8C8',
  tertiary: '#9fabb8',
}}

Tabs.TabBar
Prop	Type	Default	Desc
mountTo	string or node	null	The mountTo prop allows the Content Tabs to optionally take advantage of React Portals. There are times when the tab bar should be displayed in a separate container than the content itself and the mountTo prop enables that. Pass in either a string of a DOM id or a React node (such as a container created with React.createRef()) into which the Content Tabs should be inserted. If this is left blank, the Content Tabs will be rendered in their native DOM order. Learn more about React Portals
styles	object	{}	The styles prop allows the passing of an object of CSS properties to style the TabBar to fit a specific theme.
tabs	object	{}	The tabs prop allows the passing of an object to customize the behavior of the Tabs.
tabs.animation	string ("blur", "slide", "none")	slide	The animation property customizes how to underline moves from tab to tab.
tabs.placement	string ("start", "end", "center", "fill")	start	The placement prop allows the positioning of the tabs horizontally within the TabBar container.
tabs.styles	object	{}	The styles prop allows the passing of an object of CSS properties to style the Tabs themselves to fit a specific theme.

Tabs.Tab
Prop	Type	Default	Desc
tabFor	string	required	The tabFor prop is a string that associates the tab with the id of the content section. This functions similarly to the HTML for attribute when working with labels.
isActive	bool	false	The isActive controls the display state of the Tab. This can be beneficial when needing a specific tab to be displayed on a corresponding URL.

Tabs.ContentWrapper
Prop	Type	Default	Desc
mountTo	string or node	null	Similar to mountTo property on the TabBar component, the mountTo prop on the ContentWrapper accepts a string of a DOM id or React node to define where the content of the tabs should be rendered. This enables the ability to place the TabBar and ContentWraper in separate containers. If left blank, the ContentWrapper will be rendered in its native DOM order. Learn more about React Portals

Tabs.Content
Prop	Type	Default	Desc
id	string	required	The id property applies an id to the content section which allows it to be associated with the correct Tab.

Contact

@Yuschick on Twitter

Sponsors