Steps component designed to work seamlessly with Github Primer React.Inspired by Jean Verster's Chakra UI Steps. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.
## Features
- Multiple orientations
- Easily render step content
- Custom icons
- Size variants
## Installation
Yarn:
```bash
yarn add primer-steps
```
NPM:
```bash
npm i primer-steps
```
## Usage
In order to get started you will need to use the Primer React `ThemeProvider` component, like so:
```jsx
import { ThemeProvider } from '@primer/react';
export const App = () => {
return (
);
};
```
Then you can start using Primer Steps.
### Basic Example
```jsx
import { Step, Steps, useSteps } from 'primer-steps';
import { Box } from '@primer/react';
const content = (
);
const steps = [
{ label: 'Step 1', content },
{ label: 'Step 2', content },
{ label: 'Step 3', content },
];
export const StepsExample = () => {
const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
initialStep: 0,
});
return (
{steps.map(({ label, content }) => (
{content}
))}
{activeStep === steps.length ? (
) : (
)}
);
};
```
## Props
> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.
### `Steps`
| Prop | Type | Required | Description | Default |
| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |
| **`activeStep`** | number | yes | Currently active step | 0 |
| **`orientation`** | string | no | Sets the orientation of the Steps component | horizontal |
| **`responsive`** | boolean | no | Sets whether the component auto switches to vertical orientation on mobile | true |
| **`checkIcon`** | React.ComponentType | no | Allows you to provide a custom check icon | undefined |
| **`onClickStep`** | () => void | no | If defined, allows you to click on the step icons | undefined |
| **`labelOrientation`** | string | no | Switch between horizontal and vertical label orientation | undefined |
### `Step`
| Prop | Type | Required | Description | Default |
| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |
| **`label`** | string | no | Sets the title of the step | '' |
| **`description`** | string | no | Provides extra info about the step | '' |
| **`icon`** | React.ComponentType | no | Custom icon to overwrite the default numerical indicator of the step | undefined |
| **`isCompletedStep`** | boolean | no | Individually control each step state, defaults to active step | undefined |
---
_Source: https://npm.io/package/@primer-steps/primer-steps · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
