Never Please Meanies

    react-content-tabs

    2.0.0 • Public • Published

    React Content Tabs

    Documentation npm version

    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

    Freska

    Install

    npm i react-content-tabs

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    2.28 MB

    Total Files

    30

    Last publish

    Collaborators

    • yuschick