‚̧National Pizza Magistrate
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    react-losen

    1.1.2¬†‚Äʬ†Public¬†‚Äʬ†Published

    name: Home route: /

    react-losen

    react-losen · GitHub license

    A brutallty 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.

    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.

    Versioning

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

    Tests

    TODO: Add jest.

    Style guide

    At react-losen, we use the following tools:

    API reference

    • Wizard, the main orchestrator. It has 2 required props
      • render: This takes a set of Step as children. Minumum 2. Start and end
      • onComplete: What to do when the Wizard is complete.
      • onStepChange is called each time the step changes. This function is not called on initial load.
    • Step, a wrapper for what you want to show as a step. It registers the step on mount to the Wizard context
    • Controls, the controller for which step to show next. Has 2 directions: next and previous. It also knows if you are on the last or first step.

    Licensing

    MIT

    Keywords

    Install

    npm i react-losen

    DownloadsWeekly Downloads

    166

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    76.5 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar