@primer-steps/primer-steps v0.0.7

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

Step