ProgressTracker

Progress trackers are designed to help users through a multi-step process and it's vital to keep users informed about what section they are currently on, what section they have completed, and what tasks remain. Display the steps from left to right.

Result

Loading...

Live Editor

function Example() { const steps = [ { id: 'progress-tracker-demo-step-1', title: 'Step 1', complete: true, navigable: true, onClick: () => console.log('Step 1 clicked'), }, { id: 'progress-tracker-demo-step-2', title: 'Step 2', complete: true, navigable: false, onClick: () => console.log('Step 2 clicked'), }, { id: 'progress-tracker-demo-step-3', title: 'Step 3', complete: false, navigable: true, onClick: () => console.log('Step 3 clicked'), }, { id: 'progress-tracker-demo-step-4', title: 'Step 4', complete: false, navigable: false, onClick: () => console.log('Step 4 clicked'), }, ]; const [activeStepId, setActiveStepId] = React.useState('progress-tracker-demo-step-1'); function handleStepClicked(e, step) { setActiveStepId(step.id); } return ( <ProgressTracker id="progress-tracker-demo" steps={steps} activeStepId={activeStepId} onStepClicked={handleStepClicked} /> ); }

function Example() {
  const steps = [
    {
      id: 'progress-tracker-demo-step-1',
      title: 'Step 1',
      complete: true,
      navigable: true,
      onClick: () => console.log('Step 1 clicked'),
    },
    {
      id: 'progress-tracker-demo-step-2',
      title: 'Step 2',
      complete: true,
      navigable: false,
      onClick: () => console.log('Step 2 clicked'),
    },
    {
      id: 'progress-tracker-demo-step-3',
      title: 'Step 3',
      complete: false,
      navigable: true,
      onClick: () => console.log('Step 3 clicked'),
    },
    {
      id: 'progress-tracker-demo-step-4',
      title: 'Step 4',
      complete: false,
      navigable: false,
      onClick: () => console.log('Step 4 clicked'),
    },
  ];

  const [activeStepId, setActiveStepId] = React.useState('progress-tracker-demo-step-1');

  function handleStepClicked(e, step) {
    setActiveStepId(step.id);
  }

  return (
    <ProgressTracker
      id="progress-tracker-demo"
      steps={steps}
      activeStepId={activeStepId}
      onStepClicked={handleStepClicked}
    />
  );
}

With React Router

For the step object, set the tag to be the react-router-link component and set the to to the destination.

import { ProgressTracker } from '@emoney/kyber-components';
import { MemoryRouter, Link } from 'react-router-dom';

const steps = [
  {
    id: 'step-1',
    title: 'Step 1',
    complete: true,
    navigable: true,
    to: '/components/progresstracker/step1',
    tag: Link,
  },
  {
    id: 'step-2',
    title: 'Step 2',
    complete: true,
    navigable: false,
    to: '/components/progresstracker/step2',
    tag: Link,
  },
  {
    id: 'step-3',
    title: 'Step 3',
    complete: false,
    navigable: true,
    to: '/components/progresstracker/step3',
    tag: Link,
  },
  {
    id: 'step-4',
    title: 'Step 4',
    complete: false,
    navigable: false,
    to: '/components/progresstracker/step4',
    tag: Link,
  },
];

function Example() {
  const [activeStepId, setActiveStepId] = React.useState('step-1');

  function handleStepClicked(e, step) {
    setActiveStepId(step.id);
  }

  return (
    <MemoryRouter initialEntries={['/']}>
      <ProgressTracker
        id="progress-tracker-router-demo"
        steps={steps}
        activeStepId={activeStepId}
        onStepClicked={handleStepClicked}
      />
    </MemoryRouter>
  );
}

Props