A simple react wizard that will create a card for each child passed in
Prop
Value
background
string
color
string
shadow
boolean
dots
boolean
submit
function
titles
string[]
titlePosition
string
Instruction
Wizard Component
Built with React 17.0.2
The wizard will take up 100% of its direct parent
Background Prop
Applies the provided color to the background color of the wizard cards
Any CSS color format as a string (i.e. 'blue', '#3399ff')
Color Prop
Applies the provided color to the foreground elements (text, icons, and dots)
Any CSS color format as a string (i.e. 'white', '#fff')
Shadow Prop
The shadow existence is truthy. Simply including the prop will apply a small drop shadow to the card, and not including it will not apply the shadow
Dots Prop
The dots existence is truthy. Simply including the prop will apply a series of dots at bottom center corresponding to the number of children/cards, and not including it will not apply the dots
The dots will reflect which card you are on in the sequence
Submit Prop
The submit prop takes a callback function that will fire when the submit button is pressed
The submit existence is truthy. Including the prop with a callback function will apply a submit button on the last card of the wizard, and not including it will not apply the submit button
Titles Prop
The titles prop takes an array of strings which will be applied to each card in the wizard in order
The titles existence is truthy. Including the prop with the array will apply the titles, and not including it will not apply any headers to the cards
Title Position Prop
Indicates whether the title will be on the left, center, or right