Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nozzlegear/react-win-pivot
An attempt to recreate the Pivot element from WinJS in React.
https://github.com/nozzlegear/react-win-pivot
react uwp windows winjs
Last synced: 15 days ago
JSON representation
An attempt to recreate the Pivot element from WinJS in React.
- Host: GitHub
- URL: https://github.com/nozzlegear/react-win-pivot
- Owner: nozzlegear
- License: mit
- Created: 2017-01-26T21:59:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-03-11T20:17:19.000Z (over 2 years ago)
- Last Synced: 2024-10-13T18:32:02.081Z (about 1 month ago)
- Topics: react, uwp, windows, winjs
- Language: TypeScript
- Size: 105 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @nozzlegear/react-win-pivot
## Installation
With [Yarn](https://github.com/yarnpkg/yarn):
```shell
yarn install @nozzlegear/react-win-pivot
```
Or from [NPM](https://npmjs.com/package/@nozzlegear/react-win-pivot):
```shell
npm install @nozzlegear/react-win-pivot --save
```
## Importing
Import the component via ES6 import:
```js
import { Pivot } from "@nozzlegear/react-win-pivot";
// or use default import
import Pivot from "@nozzlegear/react-win-pivot";
```
## Example
```tsx
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 (
{`This is the ${selectedTab}.`}
)
}
```
## 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:
```css
.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;
}
```