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

Unform

Usage with TypeScript

Usage with TypeScript

Form with TypeScript

Simple input

Accessing form event

File input

On this page