@primer-steps/primer-steps

primer-steps

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