react-hook-form#useController TypeScript Examples

The following examples show how to use react-hook-form#useController. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AdvancedExample.tsx    From react-native-paper-form-builder with MIT License 6 votes vote down vote up 
function TermsCheckBox(props: LogicProps) {
  const {name, rules, shouldUnregister, defaultValue, control} = props;
  const {field} = useController({
    name,
    rules,
    shouldUnregister,
    defaultValue,
    control,
  });

  return (
    <List.Item
      title={'Remember me'}
      left={() => (
        <Checkbox.Android
          status={field.value}
          onPress={() => {
            field.onChange(field.value === 'checked' ? 'unchecked' : 'checked');
          }}
        />
      )}
    />
  );
}
Example #2
Source File: CheckboxButtonGroup.tsx    From react-hook-form-mui with MIT License 4 votes vote down vote up 
export default function CheckboxButtonGroup({
  helperText,
  options,
  label,
  name,
  parseError,
  required,
  labelKey = 'label',
  valueKey = 'id',
  returnObject,
  disabled,
  row,
  control,
  checkboxColor,
  ...rest
}: CheckboxButtonGroupProps): JSX.Element {
  const theme = useTheme()
  const { field: { value = [], onChange }, fieldState: { invalid, error } } = useController({
    name,
    rules: required ? { required: 'This field is required' } : undefined,
    control
  })

  helperText = error ? (typeof parseError === 'function' ? parseError(error) : error.message) : helperText

  const handleChange = (index: number | string) => {
    const newArray = [...value]
    const exists =
      value.findIndex((i: any) =>
        returnObject ? i[valueKey] === index : i === index
      ) === -1
    if (exists) {
      newArray.push(
        returnObject ? options.find(i => i[valueKey] === index) : index
      )
    } else {
      newArray.splice(
        value.findIndex((i: any) =>
          returnObject ? i[valueKey] === index : i === index
        ),
        1
      )
    }
    // setValue(name, newArray, { shouldValidate: true })
    onChange(newArray)
    if (typeof rest.onChange === 'function') {
      rest.onChange(newArray)
    }
  }

  return (
    <FormControl error={invalid} required={required}>
      {label && <FormLabel error={invalid}>{label}</FormLabel>}
      <FormGroup row={row}>
        {options.map((option: any) => {
          const optionKey = option[valueKey]
          if (!optionKey) {
            console.error(
              `CheckboxButtonGroup: valueKey ${valueKey} does not exist on option`,
              option
            )
          }
          const isChecked =
            value.findIndex((item: any) =>
              returnObject ? item[valueKey] === optionKey : item === optionKey
            ) !== -1
          return (
            <FormControlLabel
              control={
                <Checkbox
                  sx={{
                    color: invalid ? theme.palette.error.main : undefined
                  }}
                  color={checkboxColor || 'primary'}
                  value={optionKey}
                  checked={isChecked}
                  disabled={disabled}
                  onChange={() => handleChange(optionKey)}
                />
              }
              label={option[labelKey]}
              key={optionKey}
            />
          )
        })}
      </FormGroup>
      {helperText && <FormHelperText>{helperText}</FormHelperText>}
    </FormControl>
  )
}
Example #3
Source File: RadioButtonGroup.tsx    From react-hook-form-mui with MIT License 4 votes vote down vote up 
export default function RadioButtonGroup({
  helperText,
  options,
  label,
  name,
  parseError,
  labelKey = 'label',
  valueKey = 'id',
  required,
  emptyOptionLabel,
  returnObject,
  row,
  control,
  ...rest
}: RadioButtonGroupProps): JSX.Element {
  const theme = useTheme()
  const { field: { value, onChange }, fieldState: { invalid, error } } = useController({
    name,
    rules: required ? { required: 'This field is required' } : undefined,
    control
  })

  helperText = error ? (typeof parseError === 'function' ? parseError(error) : error.message) : helperText

  const onRadioChange = (event: ChangeEvent<HTMLInputElement>) => {
    const radioValue = (event.target as HTMLInputElement).value
    const returnValue = returnObject
      ? options.find(items => items[valueKey] === radioValue)
      : radioValue
    // setValue(name, returnValue, { shouldValidate: true })
    onChange(returnValue)
    if (typeof rest.onChange === 'function') {
      rest.onChange(returnValue)
    }
  }

  return (
    <FormControl error={invalid}>
      {label && <FormLabel required={required} error={invalid}>{label}</FormLabel>}
      <RadioGroup onChange={onRadioChange}
                  name={name}
                  row={row}
                  value={value || ''}>
        {emptyOptionLabel && (
          <FormControlLabel
            control={<Radio sx={{
              color: invalid ? theme.palette.error.main : undefined
            }} checked={!value} />}
            label={emptyOptionLabel}
            value=""
          />
        )}
        {options.map((option: any) => {
          const optionKey = option[valueKey]
          if (!optionKey) {
            console.error(
              `CheckboxButtonGroup: valueKey ${valueKey} does not exist on option`,
              option
            )
          }
          const isChecked = !!(
            value &&
            (returnObject
              ? value[valueKey] === optionKey
              : value === optionKey)
          )
          return (
            <FormControlLabel
              control={<Radio sx={{
                color: invalid ? theme.palette.error.main : undefined
              }} checked={isChecked} />}
              value={optionKey}
              label={option[labelKey]}
              key={optionKey}
            />
          )
        })}
      </RadioGroup>
      {helperText && <FormHelperText>{helperText}</FormHelperText>}
    </FormControl>
  )
}
Example #4
Source File: Logic.tsx    From react-native-paper-form-builder with MIT License 4 votes vote down vote up 
function Logic(props: LogicProps) {
  const {
    name,
    rules,
    shouldUnregister,
    defaultValue,
    control,
    type,
    textInputProps,
    JSX,
    options,
    CustomAutoComplete,
    CustomTextInput,
    onDismiss,
  } = props;
  const {field, formState} = useController({
    name,
    rules,
    shouldUnregister,
    defaultValue,
    control,
  });

  switch (type) {
    case 'text': {
      return (
        <InputText
          field={field}
          formState={formState}
          textInputProps={textInputProps}
          CustomTextInput={CustomTextInput}
        />
      );
    }
    case 'email': {
      return (
        <InputText
          field={field}
          formState={formState}
          textInputProps={{
            ...textInputProps,
            keyboardType: 'email-address',
            autoCapitalize: 'none',
          }}
          CustomTextInput={CustomTextInput}
        />
      );
    }
    case 'password': {
      return (
        <InputText
          field={field}
          formState={formState}
          textInputProps={{
            ...textInputProps,
            secureTextEntry: true,
          }}
          CustomTextInput={CustomTextInput}
        />
      );
    }
    case 'select': {
      return (
        <Fragment>
          {options && (
            <InputSelect
              field={field}
              formState={formState}
              textInputProps={{
                ...textInputProps,
                right: <TextInput.Icon name={'menu-down'} />,
              }}
              options={options}
              CustomTextInput={CustomTextInput}
              onDismiss={onDismiss}
            />
          )}
        </Fragment>
      );
    }
    case 'autocomplete': {
      return (
        <Fragment>
          {options && (
            <InputAutocomplete
              field={field}
              formState={formState}
              textInputProps={{
                ...textInputProps,
                right: <TextInput.Icon name={'menu-down'} />,
              }}
              options={options}
              CustomAutoComplete={CustomAutoComplete}
              CustomTextInput={CustomTextInput}
            />
          )}
        </Fragment>
      );
    }
    case 'custom': {
      return JSX && JSX(props);
    }
  }
}