https://github.com/chanonroy/multi-step-react-form
Multi step form example with React, Typescript, and Styled Components
https://github.com/chanonroy/multi-step-react-form
create-react-app github-actions jest react react-test-renderer styled-components typescript
Last synced: about 2 months ago
JSON representation
Multi step form example with React, Typescript, and Styled Components
- Host: GitHub
- URL: https://github.com/chanonroy/multi-step-react-form
- Owner: chanonroy
- Created: 2021-06-21T14:22:05.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-22T22:57:38.000Z (almost 5 years ago)
- Last Synced: 2025-10-29T00:46:33.099Z (7 months ago)
- Topics: create-react-app, github-actions, jest, react, react-test-renderer, styled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 327 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Multi Section React Form
Lightweight example of managing form state across multiple screens
## 📦 Project Setup
1. **Install dependencies**
Use the [yarn](https://classic.yarnpkg.com/en/) package manager to install dependencies
```shell
yarn
```
2. **Run development server**
Start the development server with the following command:
```shell
yarn start
```
3. **Visit local environment**
Navigate to `http://localhost:3000` to see the app in action
## 🤖 Tech Stack
Trying to keep things light, the app only has a few core dependencies/concepts
- **React** - ui rendering
- **Create React App** - to quickly scaffold React for the purposes of the exercise
- **Typescript** - static type checking
- **Eslint/Prettier** - code linting and automatic IDE formatting
- **Styled-Components** - to allow for CSS-in-JS component composition
- **Jest** - test task runner
- **react-test-renderer** - a lightweight React package for testing
- **Github Actions** - to run tests in a CI environment
Things that I tried to avoid, but may consider adding in the future
- **Formik (with yup) / React Final Form** - I've found these packages to add bloat in the past, so I tried to keep all the validation logic to be custom through a hook called `use-text-input-state`.
- **React Router** - It was unclear from the exercise description about whether form pages can be deep-linked into, such as going straight into `/privacy` and having the pre-saved fields re-hydrate the form. If this was the case, it would be good to implement client-side routing.
## Screenshot
