Skip to content
Snippets Groups Projects
Verified Commit 0e35578b authored by Defendi Alberto's avatar Defendi Alberto
Browse files

Move InputField to root

parent d62e3426
No related branches found
No related tags found
2 merge requests!56Refined auth flow and new website pages.,!40Sign up/Log in form nest into AuthUser
Wrapper for any input field
```js
import { SubmitHandler, useForm } from 'react-hook-form';
const { control } = useForm();
<InputField
name="password"
control={control}
rules={{
minLength: 8,
maxLength: 60,
required: {
value: true,
message: 'Insert valid password',
},
}}
label="Password"
error={false}
errorMessage="Insert valid password"
/>
```
import React, { FC } from 'react';
import { TextField } from '@material-ui/core';
import { Control, Controller, FieldValues } from 'react-hook-form';
type Props = {
/**
* Name of the elemement. (ex. email, password).
*/
name: string;
/**
* Aria label.
*/
label: string;
/**
* Takes error from react-hook-form and is thrown if
* the component is not valid.
*/
error: boolean;
/**
* Message to display if the component is not valid.
*/
errorMessage: string;
/**
* React-hook-form control.
*/
control: Control<FieldValues> | undefined;
/**
* Validation rules.
*/
rules: Partial<unknown>;
};
export const InputField: FC<Props> = (props: Props) => {
const { name, label, error, errorMessage, control, rules } = props;
return (
<Controller
name={name}
control={control}
rules={rules}
render={({ onChange, value }) => (
<TextField
variant="outlined"
margin="normal"
type={name}
required
fullWidth
id={name}
label={label}
name={name}
onChange={onChange}
value={value}
autoComplete={name}
autoFocus
error={error}
helperText={error && errorMessage}
/>
)}
/>
);
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment