Progress

Display progress relative to a limit or related to a task.

Usage

First of all, you need to import the Progress component from the kitchn package.

import { Progress } from "kitchn"

Default

<Progress value={30} />

↓Code Editor

<Progress value={30} />

Custom max

<Progress value={30} max={40} />

↓Code Editor

<Progress value={30} max={40} />

Dynamic colors

() => {
const [value, setValue] = React.useState(0);
const { theme } = useTheme();
return (
<Container>
  <Progress
    value={value}
    colors={{
      0: theme.colors.accent.danger,
      25: theme.colors.accent.warning,
      50: theme.colors.accent.success,
      75: theme.colors.accent.info,
      100: theme.colors.accent.primary,
    }}
  />
  <Container gap={5} row>
    <Button type={"dark"} onClick={() => setValue(value - 10)}>
      -
    </Button>
    <Button type={"dark"} onClick={() => setValue(value + 10)}>
      +
    </Button>
    <Button type={"dark"} onClick={() => setValue(0)}>
      reset
    </Button>
  </Container>
</Container>
)}

↓Code Editor

() => {
const [value, setValue] = React.useState(0);
const { theme } = useTheme();
return (
<Container>
  <Progress
    value={value}
    colors={{
      0: theme.colors.accent.danger,
      25: theme.colors.accent.warning,
      50: theme.colors.accent.success,
      75: theme.colors.accent.info,
      100: theme.colors.accent.primary,
    }}
  />
  <Container gap={5} row>
    <Button type={"dark"} onClick={() => setValue(value - 10)}>
      -
    </Button>
    <Button type={"dark"} onClick={() => setValue(value + 10)}>
      +
    </Button>
    <Button type={"dark"} onClick={() => setValue(0)}>
      reset
    </Button>
  </Container>
</Container>
)}

States

() => {
const [value2, setValue2] = React.useState(0);
const { theme } = useTheme();
return (
<Container gap={"small"}>
  <Progress
    value={value2}
    colors={{
      0: theme.colors.accent.danger,
      25: theme.colors.accent.warning,
      50: theme.colors.accent.success,
      75: theme.colors.accent.info,
      100: theme.colors.accent.primary,
    }}
    states={{
      0: "Your package is in our hands",
      25: "It is in our network",
      50: "Your package has arrived at its delivery site",
      75: "We are preparing your package for delivery",
      100: "Your package has been delivered",
    }}
  />
  <Container gap={"tiny"} row>
    <Button type={"dark"} onClick={() => setValue2(value2 - 25)}>
      -
    </Button>
    <Button type={"dark"} onClick={() => setValue2(value2 + 25)}>
      +
    </Button>
    <Button type={"dark"} onClick={() => setValue2(0)}>
      reset
    </Button>
  </Container>
</Container>
)}

↓Code Editor

() => {
const [value2, setValue2] = React.useState(0);
const { theme } = useTheme();
return (
<Container gap={"small"}>
  <Progress
    value={value2}
    colors={{
      0: theme.colors.accent.danger,
      25: theme.colors.accent.warning,
      50: theme.colors.accent.success,
      75: theme.colors.accent.info,
      100: theme.colors.accent.primary,
    }}
    states={{
      0: "Your package is in our hands",
      25: "It is in our network",
      50: "Your package has arrived at its delivery site",
      75: "We are preparing your package for delivery",
      100: "Your package has been delivered",
    }}
  />
  <Container gap={"tiny"} row>
    <Button type={"dark"} onClick={() => setValue2(value2 - 25)}>
      -
    </Button>
    <Button type={"dark"} onClick={() => setValue2(value2 + 25)}>
      +
    </Button>
    <Button type={"dark"} onClick={() => setValue2(0)}>
      reset
    </Button>
  </Container>
</Container>
)}

Props

Name	Type	Default	Required	Description	Accepted values
`value`	`number`	`0`	✅	The current value of the progress bar.	-
`max`	`number`	`100`	-	The max value of the progress bar.	-
`colors`	`Record<number, string>`	`-`	-	The custom colors for the progress bar.	-
`states`	`Record<number, string \| React.ReactNode >`	`-`	-	The custom states for the progress bar.	-
`title`	`boolean`	`true`	-	The title of the progress bar.	-
`checkpointTitle`	`boolean`	`true`	-	The title of the progress bar's checkpoint.	-

Note Scroller