Skip to content

A sample template for implementing a step-by-step _wizard in React using React's useContext hook.

Notifications You must be signed in to change notification settings

bobmacneal/react-wizard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

A sample template for implementing a step-by-step _wizard in React using React's useContext hook.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published