ProgressStep

The ProgressStep component represents an individual step within a multi-step Stepper process. It provides built-in handling for navigation between steps and can be customized with various props for tailored functionality and appearance.

Import

import { ProgressStep } from "phaselis";

Usage

import { Stepper, ProgressStep } from "phaselis";
import { Text } from "react-native";

const Example = () => {
  return (
    <Stepper>
      <ProgressStep
        text="Step5"
        onPrevious={() => {
          console.log("called previous step");
        }}
        onSubmit={() => {
          console.log("called on submit step.");
        }}
        disabled
      >
        <Text>Content for Step 1</Text>
      </ProgressStep>
      <ProgressStep text="Step 2" previousButtonDisabled>
        <Text>Content for Step 2</Text>
      </ProgressStep>
      <ProgressStep text="Step 3">
        <Text>Content for Step 3</Text>
      </ProgressStep>
    </Stepper>
  );
};

export default Example;

Props

text

string

The label or title displayed for the step.

import { Stepper } from "phaselis";

<Stepper>
  <ProgressStep text="Step 1" />
  <ProgressStep text="Step 2" />
  <ProgressStep text="Step 3" />
</Stepper>

onNext

() => Promise<void> | void

Callback function triggered when navigating to the next step.

import { Button, Row, Stepper } from "phaselis";

<Stepper
  renderFooter={({ nextButtonProps }) => (
    <Row style={{ justifyContent: "space-between", marginTop: 10 }}>
      <Button
        text="Next"
        size="sm"
        disabled={nextButtonProps.disabled}
        onClick={nextButtonProps.onPress}
      />
    </Row>
  )}
>
  <ProgressStep
    text="Step 1"
    onNext={() => console.log("Next step initiated")}
  />
  <ProgressStep
    text="Step 2"
    onNext={() => console.log("Next step initiated")}
  />
  <ProgressStep
    text="Step 3"
    onNext={() => console.log("Next step initiated")}
  />
</Stepper>

onPrevious

() => void

Callback function triggered when navigating to the previous step.

import { Button, Row, Stepper } from "phaselis";

<Stepper
  activeStep={2}
  renderFooter={({ previousButtonProps }) => (
    <Row style={{ justifyContent: "space-between", marginTop: 10 }}>
      <Button
        text="Previous"
        size="sm"
        disabled={previousButtonProps.disabled}
        onClick={previousButtonProps.onPress}
      />
    </Row>
  )}
>
  <ProgressStep
    text="Step 1"
    onPrevious={() => console.log("Returning to previous step")}
  />
  <ProgressStep
    text="Step 2"
    onPrevious={() => console.log("Returning to previous step")}
  />
  <ProgressStep
    text="Step 3"
    onPrevious={() => console.log("Returning to previous step")}
  />
</Stepper>

onSubmit

() => void

Callback function triggered when submitting the final step.

import { Button, Row, Stepper } from "phaselis";

<Stepper
  renderFooter={({ nextButtonProps }) => (
    <Row style={{ justifyContent: "space-between", marginTop: 10 }}>
      <Button
        text="Next"
        size="sm"
        disabled={nextButtonProps.disabled}
        onClick={nextButtonProps.onPress}
      />
    </Row>
  )}
>
  <ProgressStep text="Step 1"/>
  <ProgressStep text="Step 2"/>
  <ProgressStep
    text="Final Step"
    onSubmit={() => console.log("Final step submitted")}
  />
</Stepper>

disabled

boolean

Disables the entire step, preventing interaction when set to true.

import { Stepper } from "phaselis";

<Stepper
  renderFooter={({
    nextButtonProps,
    previousButtonProps,
    finishButtonProps,
  }) => (
    <>
      <Row style={{ justifyContent: "space-between", marginTop: 10 }}>
        <Button
          text="Previous"
          size="sm"
          disabled={previousButtonProps.disabled}
          onClick={previousButtonProps.onPress}
        />
        <Button
          text="Next"
          size="sm"
          disabled={nextButtonProps.disabled}
          onClick={nextButtonProps.onPress}
        />
      </Row>
      <Button
        text="Finish"
        size="sm"
        disabled={finishButtonProps.disabled}
        onClick={finishButtonProps.onPress}
      />
    </>
  )}
>
  <ProgressStep text="Step 1">
    <Text>Content for Step 1</Text>
  </ProgressStep>
  <ProgressStep text="Step 2">
    <Text>Content for Step 2</Text>
  </ProgressStep>
  <ProgressStep text="Step 3">
    <Text>Content for Step 3</Text>
  </ProgressStep>
  <ProgressStep text="Step 4" disabled>
    <Text>Content for Step 4</Text>
  </ProgressStep>
  <ProgressStep text="Step 5">
    <Text>Content for Step 5</Text>
  </ProgressStep>
  <ProgressStep text="Step 6">
    <Text>Content for Step 6</Text>
  </ProgressStep>
</Stepper>