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

Move to root for component reusing

parent 80e069d2
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