@nozzlegear/react-win-pivot v2.0.1

@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:

Styling

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

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;
}