/react-losen

A super customisable Wizard for React and React Native. Docs ๐Ÿ‘‰

Primary LanguageJavaScriptMIT LicenseMIT

name route
Home
/

react-losen

react-losen ยท GitHub license

A brutally simple wizard for React and React Native.

Note: This module is currently in beta. First official release is right around the corner, and will include some nice changes:

  • Async step validation
  • Upgrade to new React Context API

Please submit issues/feedback on GitHub โœŒ๏ธ

Install

yarn add react-losen

Example

import { Wizard, Step, Controls } from 'react-losen';

<Wizard
  render={() => (
    <>
      <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) => (
          <>
            <Button onClick={onPrevious} disabled={isFirstStep}>
              Previous
            </Button>

            <Button onClick={onNext}>Next</Button>
          </>
        )}
      />
    </>
  )}
/>;

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.

Include the following polyfills to support older browsers:

  • array-findindex-polyfill
  • url-search-params-polyfill
  • Object.entries polyfill

Developing

Use yarn 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 run 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 run publish. Pack guides you through the wizard, helps you bump the version number and publish to npm. Note: It's importaint to use the run argument, as yarn publish is a built in command and won't use Pack

Building docs

The documentation is built by running yarn docs:build. This generates a static site in ./docs/. Currently the site is deployed and hosted with Zeit's Now.

Todo: Add information on how to deploy docs with Now.

Versioning

react-losen use SemVer for versioning. For the versions available, see the link to tags on this repository.

Tests

Testing is done using the Jest test framework. Assertions is done with Jest's Expect matchers.

Todo: Add CI.

Style guide

For code quality, react-losen use the following tools:

API reference

See documentation

Licensing

MIT