@nozzlegear/react-win-pivot

Installation

With Yarn:

yarn install @nozzlegear/react-win-pivot

Or from NPM:

npm install @nozzlegear/react-win-pivot --save

Importing

Import the component via ES6 import:

import { Pivot } from "@nozzlegear/react-win-pivot";
// or use default import
import Pivot from "@nozzlegear/react-win-pivot";

Example

import * as React from "react";
import { Pivot } from "../index";

type Tab = "First Tab" | "Second Tab" | "Third Tab";

const DEFAULT_TABS: Tab[] = [
    "First Tab",
    "Second Tab",
    "Third Tab",
]

function MyPivotComponent(): JSX.Element {
    const [selectedTab, setSelectedTab] = React.useState(DEFAULT_TABS[0]);

    return (
        <Pivot animate={true} tabs={DEFAULT_TABS} selectedTab={selectedTab} onChange={setSelectedTab}>
            <div>
                <h1>{`This is the ${selectedTab}.`}</h1>
            </div>
        </Pivot>
    )
}

Props

Note: This package has full TypeScript definitions! You should automatically receive intellisense for all of the props documented below:

| Name | Type | Required | Description | |------|------|----------|-------------| | animate | boolean | Required | Indicates that the pivot should animate when it renders and each time the selected tab changes. | | animationDuration? | number | Optional, default 200 | The duration of the animation in milliseconds. Only used when animate is true. | | tabs | string[] | Required | An array of strings to be used as the name of the tabs, e.g. "Tab 1", "Tab 2". | | selectedTab | string | Required | The currently selected tab. Must be one of the string values from tabs. | | onChange | (newTab: string) => void | Required | A function that's called when the user attempts to change the selected tab. Note that this is only a notification that the user wants to change the tab, it will not change itself. | | children | React.ReactNode | Required | Content to show in the Pivot's content area. |

Styling

If you'd like to style the Pivot components yourself, you can change the following CSS variables with your own stylesheet:

| Name | Default value | | ---- | ------------- | | --pivot-tabs-font-family | inherit | | --pivot-tabs-font-size | 24px | | --pivot-tabs-font-color | rgba(0,0,0,.6) | | --pivot-tabs-active-font-color | #000 | | --pivot-tabs-padding | 20px 20px 20px 0 | | --pivot-tabs-column-gap | 20px | | --pivot-tabs-border-width | 0 0 1px 0 | | --pivot-tabs-border-style | solid | | --pivot-tabs-border-color | #ccc | | --pivot-tabs-content-padding | 0 | | --pivot-tabs-slide-in-start-opacity | 0 | | --pivot-tabs-slide-in-end-opacity | 1 | | --pivot-tabs-slide-in-transition | all 0.1s ease-in-out | | --pivot-tabs-slide-in-transform | translate(0, 0) | | --pivot-tabs-slide-in-from-left-transform | translate(-100px, 0px) | | --pivot-tabs-slide-in-from-right-transform | translate(100px, 0px) | | --pivot-tabs-slide-in-from-below-transform | translate(0px, 100px) |

Example:

.react-win-pivot {
    /* Change the padding of the tabs list */
    --pivot-tabs-padding: 40px 0;
    /* Change the css transition for animated tabs */
    --pivot-tabs-slide-in-transition: all 0.15s linear;
}