react-losen
A brutallty simple wizard for React and React Native. Note: This module is under active development and not ready for release yet.
Install
yarn add react-losen
Example
import { Wizard, Step, Controls } from 'react-losen'; <Wizard render={() => ( <Fragment> <Step name="start">Step one</Step> <Step name="second-step">This is the second step</Step> <Step name="final-step">Click next to finish</Step> <Controls render={(onNext, onPrevious, isFirstStep) => ( <Fragment> <Button onClick={onPrevious} disabled={isFirstStep}> Previous </Button> <Button onClick={onNext}>Next</Button> </Fragment> )} /> </Fragment> )} />;
Developing
Built With
react-losen is built with React and it's Context API under the hood. We use render props to expose functionality to child components.
Developing
Use
docz:dev to spin up a dev server which let's you view and play with the source components. To get started, create a
.md in the
./pages directory. It uses MDX which let's you import and write
JSX within markdown documents. For more info out the Docz website and read up on the MDX spec.
Building
yarn build
This command uses
@pika/pack to build for browsers. Plugins are specified under
@pika/pack in
package.json.
Publishing
Publish new versions with
yarn pack:publish. Pika guides you through the Through a wizard, this helps you bump the version number and publish to npm.
Deloying docs
The documentation is built by running
yarn docz:build. This generates a static site in
./docs/. Currently the site is deployed and hosted with Zeit's Now.