Unform

Usage with TypeScript

Unform exposes all type definitions from within it's packages, so it's not necessary to install @types dependencies.

Form with TypeScript

When creating a form component using Unform and TypeScript, there are two main points to remember:

  • The onSubmit function can be typed using SubmitHandler<FormData> where FormData is the format of data inputted by user;
  • If you're using useRef to access form reference, remember to add FormHandles as type parameter to it;

1import React, { useRef } from 'react';
2import { SubmitHandler, FormHandles } from '@unform/core';
3import { Form } from '@unform/web';
4import Input from './components/Input';
5
6interface FormData {
7 name: string;
8 email: string;
9};
10
11const MyForm: React.FC = () => {
12 const formRef = useRef<FormHandles>(null);
13
14 const handleSubmit: SubmitHandler<FormData> = (data) => {
15 console.log(formRef);
16 };
17
18 return (
19 <Form ref={formRef} onSubmit={handleSubmit}>
20 <Input name="name" />
21 <Input name="email" />
22 </Form>
23 )
24};
25
26export default MyForm;

Simple input

When creating a simple HTML input or any other HTML element used for input source, remember to always extend the element props. In web you can always use the JSX.IntrinsicElements['element'] to get the props adapted to JSX.

In React Native you can import default component props directly from `react-native` package, for example:

import { TextInputProps } from 'react-native'`

Also, in web (ReactJS) remember to reference the global element inside useRef hook and always set the default value to null.

1import React, { useEffect, useRef } from 'react';
2import { useField } from '@unform/core';
3
4interface Props {
5 name: string;
6 label?: string;
7};
8
9type InputProps = JSX.IntrinsicElements['input'] & Props;
10
11const Input: React.FC<InputProps> = ({ name, label, ...rest }) => {
12 const inputRef = useRef<HTMLInputElement>(null);
13
14 const { fieldName, defaultValue, registerField, error } = useField(name);
15
16 useEffect(() => {
17 registerField({
18 name: fieldName,
19 path: 'value',
20 ref: inputRef.current,
21 })
22 }, [fieldName, registerField]);
23
24 return (
25 <>
26 { label && <label htmlFor={fieldName}>{label}</label> }
27
28 <input
29 id={fieldName}
30 ref={inputRef}
31 defaultValue={defaultValue}
32 {...rest}
33 />
34
35 { error && <span>{error}</span> }
36 </>
37 );
38};
39
40export default Input;
Edit this page on GitHub