├── src
    ├── react-app-env.d.ts
    ├── App.tsx
    ├── index.tsx
    └── TsForm.tsx
├── img
    └── formikui.png
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── .gitignore
├── tsconfig.json
├── README.md
└── package.json


/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/img/formikui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grayoj/reactjs-typescript-form/HEAD/img/formikui.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grayoj/reactjs-typescript-form/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grayoj/reactjs-typescript-form/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grayoj/reactjs-typescript-form/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { TsForm } from './TsForm';
 3 | 
 4 | const App = () => {
 5 |   return (
 6 |      <div style={{ textAlign: "center" }}>
 7 |     <TsForm onSubmit={({fullName, email}) => {
 8 |       console.log(fullName, email)
 9 |     }} />
10 |       </div>
11 |   );
12 | };
13 | 
14 | export default App;


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | ReactDOM.render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>,
 9 |   document.getElementById('root')
10 | );
11 | 
12 | // If you want to start measuring performance in your app, pass a function
13 | // to log results (for example: reportWebVitals(console.log))
14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
15 | 
16 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
13 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14 | 
15 |     <title>TypeScript Form with Formik</title>
16 |   </head>
17 |   <body>
18 |     <noscript>You need to enable JavaScript to run this app.</noscript>
19 |     <div id="root"></div>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Form with Formik, Material UI
 2 | 
 3 | This project was built with [Create React App](https://github.com/facebook/create-react-app), and is written in TypeScript.
 4 | I chose TypeScript as the my preferable language for creating the project by running:
 5 | 
 6 | ```> yarn create react-app my-app --template typescript```
 7 | 
 8 | Yarn was the package manger I used in the project.
 9 | ## Installation
10 | 
11 | Just incase you want to use this TypeScript boilerplate for your application.
12 | Clone this repository:
13 | ```> git clone https://github.com/grayoj/reactjs-typescript-form.git```
14 | 
15 | Install all dependencies, using ``yarn add``
16 | 
17 | <img src="img/formikui.png">
18 | 
19 | Install formik and Material UI using ``yarn add formik`` and ``yarn add @material-ui/core`` respectively.
20 | 
21 | Run this to launch the project:
22 | 
23 | `yarn start`
24 | 
25 | Starts the local server
26 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
27 | 
28 | ## Enjoy
29 | Reach out to me. geraldabuchi@twitter.com
30 | 
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reactjs-typescript-form",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^4.12.4",
 7 |     "@material-ui/icons": "^4.11.3",
 8 |     "@testing-library/jest-dom": "^5.14.1",
 9 |     "@testing-library/react": "^12.0.0",
10 |     "@testing-library/user-event": "^13.2.1",
11 |     "@types/jest": "^27.0.1",
12 |     "@types/node": "^16.7.13",
13 |     "@types/react": "^17.0.20",
14 |     "@types/react-dom": "^17.0.9",
15 |     "formik": "^2.2.9",
16 |     "react": "^18.0.0",
17 |     "react-dom": "^18.0.0",
18 |     "react-scripts": "5.0.0",
19 |     "typescript": "^4.4.2",
20 |     "web-vitals": "^2.1.0"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   },
46 |   "devDependencies": {
47 |     "@types/material-ui": "^0.21.12"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/TsForm.tsx:
--------------------------------------------------------------------------------
 1 | // Import React
 2 | import * as React from 'react';
 3 | 
 4 | // Formik and Material UI
 5 | import {TextField, Button} from '@material-ui/core';
 6 | import {Formik, Form} from 'formik'
 7 | 
 8 | // Interface Props
 9 | interface Props {
10 |     onSubmit: (values: Values) => void;
11 | }
12 | 
13 | // Interface Values
14 | interface Values {
15 |     fullName: string;
16 |     email: string;
17 | }
18 | 
19 | export const TsForm: React.FC<Props> = ({onSubmit}) => {
20 |     return (
21 |     <Formik initialValues={{fullName: '', email: ''}}
22 |     onSubmit={(values) => {
23 |         onSubmit(values)
24 |     }}>
25 |         {({values, handleChange, handleBlur}) => ( 
26 |     <Form>  
27 |         <div> 
28 |         <TextField
29 |         placeholder="Enter your Full Name"
30 |         name="fullName"
31 |         value={values.fullName}
32 |         onChange={handleChange}
33 |         onBlur={handleBlur}
34 |         />
35 |         </div> 
36 |         <div>
37 |            <TextField
38 |         placeholder="Enter your Email Address"
39 |         name="email"
40 |         value={values.email}
41 |         onChange={handleChange}
42 |         onBlur={handleBlur}
43 |         />
44 |         </div>
45 |       
46 |         <Button style={{color: 'blue'}} type="submit">Submit Form</Button>
47 |     </Form>
48 |     )}
49 |     </Formik>
50 |     );
51 | }


--------------------------------------------------------------------------------