React Signup Form
Overview
This is a "Sign Up" form prototype using React demonstrating the following:
- Three input fields: username, password, and password confirmation.
- State persistence.
- Password and password confirmation match validation.
- Informing the user when the password and password confirmation do not match.
- Styling using Emotion.
- Theming.
- Presence validation for username, password, and password confirmation.
- Username format validation.
- Minimum length validation for username and password.
- Maximum length enforcement for username.
- Password strength validation.
- Dependencies across fields for validation.
Demo
https://chaddjohnson.github.io/react-signup-form/
Running locally
- Run
yarn install
ornpm install
. - Run
yarn start
ornpm start
. - Visit http://localhost:3000 in a browser.
Running tests
Run yarn test
or npm run test
.
Deployment
Push to master
, and the app will be deployed to GitHub Pages via CI.
Possible improvements
- Provide a way to access a list of all errors present in the form.
- Explore leveraging
onFocus
with form hooks to provide developer the option to only display errors when fields do not have focus. - Break out form hooks into a separate package.
- Add
Checkbox
component. - Ensure validation for checkbox types are supported.
- Ensure TextField fully supports all possible HTML input types.
- Consider adding more helper methods such as
setFieldValue
from Formik to support a wider range of validation scenarios. - Investigate how React Hook Form and Formik work, and see if any ideas or developer options from those could be incorporated. Namely, analyze their uses of
ref
. - Consider the possibility of making
TextField
an uncontrolled component to reduce re-renders during validation (as React Hook Form does). - Set form as
dirty
only when comparison of initial field values to current field values yields a difference.