Basics

Stages is the main component for creating wizards and other multi stage constructs. Each children of Stages becomes a stage. A stage can (and should) be named, otherwise the index is used. Here's a basic example with two stages, or said another way, a wizard with two steps:

import React, { Fragment } from "react";
import { Stages, Form, Navigation, Progression, HashRouter } from "react-stages";

// ... import form configs and renderers here! See the above form example for how.

<Stages
    initialData={{}}
    render={({ navigationProps, progressionProps, routerProps, steps }) => (
        <div>
            <Navigation {...navigationProps} />
            <Progression {...progressionProps} />
            {steps}
            {typeof window !== "undefined" ? <HashRouter {...routerProps} /> : null}
        </div>
    )}
>
    {({ data, allData, isActive, onChange, onNav, index, errors, setStepKey, initializing }) => {
        const key = setStepKey("basics", index);
        if (initializing) return null;

        return (
            <Fragment key={`step-${key}`}>
                {isActive ? <h2>Basics:</h2> : null}
                <Form
                    id={key}
                    data={data}
                    config={basicsConfig}
                    render={({ actionProps, fieldProps, loading }) => (
                        <FormLayout
                            loading={loading}
                            fields={<BasicsRenderer {...fieldProps} />}
                            actions={<Actions
                                config={createActionButtonConfig("first", onNav, onSubmit, data)}
                                {...actionProps}
                            />}
                        />
                    )}
                    fields={fields}
                    onChange={onChange}
                    isVisible={isActive}
                />
            </Fragment>
        );
    }}
    {({ data, allData, isActive, onChange, onNav, index, errors, setStepKey, initializing }) => {
        const key = setStepKey("guests", index);
        if (initializing) return null;

        return (
            <Fragment key={`step-${key}`}>
                {isActive ? <h2>Guests:</h2> : null}
                <Form
                    id={key}
                    data={data}
                    config={guestsConfig}
                    render={({ actionProps, fieldProps, loading }) => (
                        <FormLayout
                            loading={loading}
                            fields={<GuestsRenderer {...fieldProps} />}
                            actions={<Actions
                                config={createActionButtonConfig("regular", onNav, onSubmit, data)}
                                {...actionProps}
                            />}
                        />
                    )}
                    fields={fields}
                    onChange={onChange}
                    isVisible={isActive}
                />
            </Fragment>
        );
    }}
</Stages>

Most lines of code are of course the individual forms in each step, which can get as complex as you want.

Check the following pages for all the details or the demos for a complete implementation.