A Patternfly react wizard framework.
npm install @patternfly-labs/react-form-wizardAn opinionated framework for wizards using PatternFly.
#### Using npm
``sh`
npm install @patternfly-labs/react-form-wizard @patternfly/react-core @patternfly/react-styles
#### Using yarn
`
yarn add @patternfly-labs/react-form-wizard @patternfly/react-core @patternfly/react-styles
Import css from patternfly before importing react-form-wizard.
`typescript`
import '@patternfly/react-core/dist/styles/base.css'
import '@patternfly/react-styles/css/components/Wizard/wizard.css'
A wizard contains steps which contain sections which contain inputs.
`tsx
import { WizardPage, Step, Section, TextInput, Select } from '@patternfly-labs/react-form-wizard'
function Example() {
return (
)
}
`
The wizard works by setting an item context which inputs use as a data source.
Inputs then get value or set value in the item context using path notation.
`tsx`
function Example() {
return (
)
}
Some inputs can change the item context, such as the ArrayInput.
`tsx`
function Example() {
return (
)
}
The root data can either be an object or an array of objects.
When working with an array of objects anItemSelector can be used to set the item context specific item.
`tsx`
function Example() {
return (
)
}
ArrayInput can also be used to work with a subset of items in this case.
`tsx`
function Example() {
return (
)
}
- label - The label for the input.
- path - The path the input is getting and setting value to, in the current item context.
- id - Optional id of the input control. Used for testing. If not set, defaults to a sanitized version of the path.
- validation - Optional validation function that takes in the current item context and input value. It should return an error string if there is an error.
- hidden - Optional hidden function that takes in the current item context and returns true if the input should be hidden.
Inputs take an optional validation function. The validation function takes in the current item context and input value. It should returns a validation error string if the validation fails.
Inputs take an optional hidden function. The hidden function takes in the current item context, and returns true if the input should be hidden.
Steps and Sections automatically hide if all its inputs are hidden. This makes it easy to make a wizard with conditional flow.
See the wizards directory for example wizards.
> If you plan on contributing, please fork the repo and create a pull request using your fork.
1. Clone the repo
`
git clone git@github.com:patternfly-labs/react-form-wizard.git
2. Install dependencies
`
npm ci
3. Start the project
`
npm start