Skip to content

Latest commit

 

History

History
57 lines (33 loc) · 1.96 KB

README.md

File metadata and controls

57 lines (33 loc) · 1.96 KB

react-wizard

react-wizard is a step-by-step wizard workflow written in JavaScript with React. It demonstrates an implementation of the useContext hook to share a user's form input (application's "state") across components.

The step-by-step workflow is applied to a hypothetical task scheduling feature.

All form input in this application, whether text input, checkbox, or select, is auto-generated from the initial state of the context in WizardContext.js.

.

Setup

  1. Clone the repository $ git clone https://github.com/bobmacneal/react-wizard.git
  2. Install Yarn for package management.
  3. Install dependencies using yarn $ yarn

Run

$ yarn start

Additional Info

The post Understanding React useContext outlines the motivation behind react-wizard and describes key implementation details.

Beyond bootstrapping with Create React App, the following npm packages were added:

  • prop-types to provide runtime type checking.

    yarn add prop-types

  • styled-components to embed CSS styles within components which makes the component's styling quicker/easier to find and update.

    yarn add styled-components

  • babel-plugin-styled-components so Babel knows how to transpile CSS in the styled-components mentioned above.

    yarn add babel-plugin-styled-components

  • node-sass for styling advantages over vanilla CSS, like variables and simple inheritance via extension.

    yarn add node-sass