https://github.com/raisiqueira/headless-stepper-monorepo

Production ready React hook to create awesome stepper components. Effortless to use, easy to customize.
https://github.com/raisiqueira/headless-stepper-monorepo

accessibility headless headless-components headlessui nx react react-hooks step-component stepper tabs-component

Last synced: 7 days ago
JSON representation

Production ready React hook to create awesome stepper components. Effortless to use, easy to customize.

• Host: GitHub
• URL: https://github.com/raisiqueira/headless-stepper-monorepo
• Owner: raisiqueira
• Created: 2022-03-10T21:37:47.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-11T15:22:39.000Z (6 months ago)
• Last Synced: 2024-10-12T14:44:26.080Z (27 days ago)
• Topics: accessibility, headless, headless-components, headlessui, nx, react, react-hooks, step-component, stepper, tabs-component
• Language: TypeScript
• Homepage: https://headless-stepper.netlify.app/
• Size: 2.07 MB
• Stars: 51
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-react-headless-components - Headless Stepper - Production ready React hook to create awesome stepper components. Effortless to use, easy to customize. (Libraries)

README

        
# headless-stepper

Production ready React hook to create awesome stepper components. Effortless to use, easy to customize.

![npm bundle size](https://img.shields.io/bundlephobia/minzip/headless-stepper?style=flat-square)

[Documentation](https://headless-stepper.netlify.app/) | [Issues](https://github.com/raisiqueira/headless-stepper-monorepo/issues)

## Quick features

- Headless.

- 100% TypeScript.

- No dependencies.

- 100% customizable.

## Start

Install the `headless-stepper` library using your favorite package manager:

```bash

npm install headless-stepper

# or using yarn

yarn add headless-stepper

# or using pnpm

pnpm install headless-stepper

```

## Using

The headless-stepper library provide two ways to build your stepper component:

- Using the `Stepper` and `Step` components. See the [documentation](https://headless-stepper.netlify.app/getting-started/using-stepper) for more details.

- Using the `useStepper` hook. See the [documentation](https://headless-stepper.netlify.app/getting-started/using) for more details.

### Using the `Stepper` and `Step` components

To use the `Stepper` and `Step` components, you need to import the `Stepper` and `Step` components from the `headless-stepper` library.

```tsx

import { Stepper, Step } from 'headless-stepper/components';

const MyAwesomeStepper = () => {

  return (

    

      Step 1 content

      Step 2 content

      Step 3 content

    

  );

};

export default MyAwesomeStepper;

```

Under the hood, the `Stepper` component will use the `useStepper` hook to manage the state of the stepper. You can use the `useStepper` hook to build your own stepper component.

### Using the `useStepper` hook

```tsx

import React from 'react';

import { useStepper } from 'headless-stepper';

export interface HeadlessStepperProps {}

export function HeadlessStepper(props: HeadlessStepperProps) {

  const steps = React.useMemo(

    () => [

      {

        label: 'Step 1',

      },

      { label: 'Step 2' },

      { label: 'Step 3' },

      { label: 'Step 4', disabled: true },

      { label: 'Step 5' },

      { label: 'Step 6' },

    ],

    []

  );

  const { state, nextStep, prevStep, progressProps, stepsProps } = useStepper({

    steps,

  });

  return (

    


      


        

          {stepsProps?.map((step, index) => (

            


              {steps[index].label}

            

          ))}

        

      

      
Current step: {state.currentStep}

      

        Prev

      

      

        Next

      

      


    

  );

}


export default HeadlessStepper;

```

You can find more examples on [documentation](https://headless-stepper.netlify.app/).

## Contribute

This project was started with [Nx](https://nx.dev) to manage the monorepo. To learn more about Nx, read the [Nx documentation](https://nx.dev/).

The `headless-stepper` library and the documentation is under _packages_ folder. If you're running on local, execute the following command to start the development server:

```bash

npm run dev

```

The Storybook will be available on the localhost:4400 and refresh when you change the `useStepper` code.

### Running unit tests

Run `nx test headless-stepper` to execute the unit tests via [Vitest](https://vitest.dev).

## Sponsors

[![Sponsors](https://cdn.jsdelivr.net/gh/raisiqueira/static@master/sponsors.svg)](https://github.com/sponsors/raisiqueira)

## License

MIT @ Raí Siqueira.