Nextjs Core Wizard

Pro Component

If you have lengthy forms to complete, you can use this component, which allows you to cut the form into steps and let the user complete it gradually.

We’ve decided to create this component due to the fact that we wanted to go the same way as our most of components (we wanted to use jss).

You can see how it looks and feels in the live demo.

Notice

You can pass props in which ever form you want from one step to another by using the sendState() function in your step of this component.

You can than acces in your step component that data through allStates prop.

Style

You will find the styles for this component in assets/jss/nextjs-material-dashboard-pro/components/wizardStyle.js.

Props

Wizard.defaultProps = {
  color: "rose",
  title: "Here should go your title",
  subtitle: "And this would be your subtitle",
  previousButtonText: "Previous",
  previousButtonClasses: "",
  nextButtonClasses: "",
  nextButtonText: "Next",
  finishButtonClasses: "",
  finishButtonText: "Finish"
};

Wizard.propTypes = {
  steps: PropTypes.arrayOf(
    PropTypes.shape({
      stepName: PropTypes.string.isRequired,
      stepComponent: PropTypes.func.isRequired,
      stepId: PropTypes.string.isRequired
    })
  ).isRequired,
  color: PropTypes.oneOf([
    "primary",
    "warning",
    "danger",
    "success",
    "info",
    "rose"
  ]),
  title: PropTypes.string,
  subtitle: PropTypes.string,
  previousButtonClasses: PropTypes.string,
  previousButtonText: PropTypes.string,
  nextButtonClasses: PropTypes.string,
  nextButtonText: PropTypes.string,
  finishButtonClasses: PropTypes.string,
  finishButtonText: PropTypes.string,
  // function fired on the finish button click
  finishButtonClick: PropTypes.func,
  // if on next button click the form should be validated
  // if true, you need to add a isValidated() function in your component
  // that should return true or false, depending on that state of your validation
  validate: PropTypes.bool
};