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:

yarn add primer-steps

NPM:

npm i primer-steps

Usage

In order to get started you will need to use the Primer React ThemeProvider component, like so:

import { ThemeProvider } from '@primer/react';

export const App = () => {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
};

Then you can start using Primer Steps.

Basic Example

import { Step, Steps, useSteps } from 'primer-steps';
import { Box } from '@primer/react';
const content = (
  <Box py={4}>
    <LoremIpsum p={1} />
  </Box>
);

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 (
    <Flex flexDir="column" width="100%">
      <Steps activeStep={activeStep}>
        {steps.map(({ label, content }) => (
          <Step label={label} key={label}>
            {content}
          </Step>
        ))}
      </Steps>
      {activeStep === steps.length ? (
        <Flex p={4}>
          <Button mx="auto" size="sm" onClick={reset}>
            Reset
          </Button>
        </Flex>
      ) : (
        <Flex width="100%" justify="flex-end">
          <Button
            isDisabled={activeStep === 0}
            mr={4}
            onClick={prevStep}
            size="sm"
            variant="ghost"
          >
            Prev
          </Button>
          <Button size="sm" onClick={nextStep}>
            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
          </Button>
        </Flex>
      )}
    </Flex>
  );
};

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 |