react-botw-tabs

A tab sheet component styled like Zelda: Breath of the Wild menus.

Contents

• Install
• Usage
• Props
• License

Install

npm install --save react-botw-tabs

Peer Dependencies;

• React v16 +

Usage

import React, { Component } from 'react'

import { BotwTabs } from 'react-botw-tabs'

class Example extends Component {
  render() {
    return (
      <BotwTabs
        defaultActiveId={"pencil"}
        tabs={[
          {
            id: "pencil",
            name: "Pencil",
            faicon: <i className="fa fa-pencil" />,
            content: (
              <div style={{ textAlign: "center" }}>
                <h3>This is the Pencil tab.</h3>
              </div>
            )
          },
          {
            id: "bomb",
            name: "Bomb",
            faicon: <i className="fa fa-bomb" />,
            content: (
              <div style={{ textAlign: "center" }}>
                <h3>This is the Bomb tab.</h3>
              </div>
            )
          }
        ]}
      />
    )
  }
}

Examples at https://darylbuckle.github.io/react-botw-tabs.

Example with other botw-menu components at https://darylbuckle.github.io/react-botw-menu-components.

Props

BotwTabs

Property	Type	Default	Mandatory	Description
tabs	botwTab[]		true	The tabs to display. This also includes the tab content.
activeId	string		false	If controlling the active tab, this is the id of the current active tab.
defaultActiveId	string		false	If uncontrolled, this is the id of the default active tab.
onChange	(tab) => void		false	A callback for when a new tab is selected.
className	string		false	Additional css classes for the container.
style	React.CSSProperties		false	Additional styles for the container.
tabsheetClassName	string		false	Additional css classes for the tab content container.
tabsheetStyle	React.CSSProperties		false	Additional styles for the tab content container.

botwTab class

Property	Type	Default	Mandatory	Description
id	string		true	Unique identifier for the tab.
name	string		true	The name of the tab.
imgSrc	string		false	Src of the image.
activeImgSrc	string		false	Override the image source when active.
faicon	any		false	Alternative to ImgSrc. Allows JSX to be used for the image (e.g font awesome icons)
className	string		false	Additional css classes for the tab.
style	React.CSSProperties		false	Additional styles for the tab.
content	Any JSX		false	The actual content of the tab. This is rendered if the tab is selected. It's rendered underneath the tab sheet.

License

MIT © DarylBuckle 2020