This stepper form is fully driven by the JSON configured on (./src/store/context.js), both number of steps and form elements can be configurable which will ensure zero dependency and 100% reusability, adding to that its implemented with React latest hooks :)
Step 1: npm install
Step 2: npm run start
- React
- React hooks (useState, useReducer, memo, useContext and useEffect)
- Custom hooks(useEffect) for usePersistedContext
- Lazy - We are using to load the component when ever needed asynchronously
Please note: This release, we have not much focused on UI part, validation and test cases and focused only on skeleton.
Step by Step Form - Watch Video
ATOMIC design
src/components/Button
src/components/InputCheckBox
src/components/InputText
src/components/SelectBox
src/components/ElmFactory.js
src/containers/Form.js
src/index.js
src/store/context.js
src/store/reducer.js
src/store/usePersist.js
src/css/index.css
src/constants/constants.js
src/utils/Helpers.js
"step" - determine each step form - you can add N number of forms
"type" - its a key for driving / picking correct Atom (eg: type: "text", type: "select" and type: "checkbox")
Please note: as of now we have only three Atom (InputCheckbox, InputSelect and InputBox) which can be configured dynamically.
Sample JSON
{
"step1": [
{
"id": 1,
"type": "select",
"label": "Country",
"options": [
"USA",
"Germany",
"India"
],
"optionValue": "USA"
},
{},
{}
],
"step2": [
{
"id": 1,
"type": "checkbox",
"name": "Number",
"label": "Place 1",
"isChecked": false
},
{},
{}
],
"step3": [
{
"id": 1,
"type": "text",
"label": "First Name",
"name": "firstName",
"value": ""
},
{},
{}
]
}