“Let us<Step>
into the night and pursue that flighty temptress, adventure.”
\-- Albus Dumbledore
What is React Albus?
React Albus is a React component library used to build declarative multi-step journeys (also known as Wizards). You define your step content and ordering and React Albus will manage the journey-related state for you.React Albus is otherwise unopinionated and allows you to compose funcionality such as routing, animation, and analytics however you see fit.
Installation
npm install react-albus
Example
import React from 'react';
import { Wizard, Steps, Step } from 'react-albus';
const Example = () => (
<Wizard>
<Steps>
<Step
id="merlin"
render={({ next }) => (
<div>
<h1>Merlin</h1>
<button onClick={next}>Next</button>
</div>
)}
/>
<Step
id="gandalf"
render={({ next, previous }) => (
<div>
<h1>Gandalf</h1>
<button onClick={next}>Next</button>
<button onClick={previous}>Previous</button>
</div>
)}
/>
<Step
id="dumbledore"
render={({ previous }) => (
<div>
<h1>Dumbledore</h1>
<button onClick={previous}>Previous</button>
</div>
)}
/>
</Steps>
</Wizard>
);
export default Example;
Demo
Check out the demo page!API
<Wizard>
Props
onNext(wizard)
: function (optional)
A function that will be called by <Wizard>
to determine the next step to proceed to.Params
wizard
(object): Thecontext.wizard
object.
If you do not pass an
onNext
prop, <Wizard>
will proceed directly to the next step.render(wizard)
: function (optional)
A function that will be used as the render function of <Wizard>
.Params
wizard
(object): Thecontext.wizard
object.
<Steps>
Wraps all of the <Step>
components in your journey. The only direct children of <Steps>
should be <Step>
components.Props
step
: object (optional)
An object describing the current step with the structure: { id: string }
. Defining a step
prop will make <Steps>
a controlled component.<Step>
Wraps all the content that will be conditionally shown when the step is active.Props
id
: string
Unique key for each step.In addition to
id
, any additional props added to <Step>
will be available on each step
object. This can be used to add names, descriptions, or other metadata to each step.<WithWizard>
is an alias for <Step>
that can be used to access context.wizard
anywhere within the <Wizard>
tree.withWizard()
A higher order component that adds context.wizard
as a wizard
prop on the wrapped component.context.wizard
<Wizard>
provides an object on context with the following properties:step
(object): Describes the current step with structure:{ id: string }
.steps
(array): Array ofstep
objects in the order they were declared within<Steps>
.history
(object): The backinghistory
object.next()
(function): Moves to the next step in order.previous()
(function): Moves to the previous step in order.go(n)
(function): Movesn
steps in history.push(id)
(function): Pushes the step with correspondingid
onto history.replace(id)
(function): Replaces the current step in history with the step with correspondingid
.
Usage with React Router
Internally, React Albus uses history to maintain the ordering of steps. This makes integrating with React Router (or any other router) as easy as providing<Wizard>
with history
and basename
props.import React from 'react';
import { Route } from 'react-router-dom';
import { Wizard } from 'react-albus';
const RoutedWizard = ({ children }) =>
<Route
render={({ history, match: { url } }) =>
<Wizard history={history} basename={url}>
{children}
</Wizard>}
/>;
export default RoutedWizard;