react-hook-form#useFormContext JavaScript Examples

The following examples show how to use react-hook-form#useFormContext. 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: function-component-2-context.input.js    From codemod with MIT License 7 votes vote down vote up 
Form = () => {
  const { register, handleSubmit } = useFormContext();

  return (
    <form onSubmit={handleSubmit}>
      <InputContainer label="Email">
        <Input
          name="email"
          ref={register}
          autoComplete="username"
        />
      </InputContainer>
      <InputContainer label="Password *">
        <Input
          name="password"
          ref={register({
            required: true,
            validate: (value) => !!value
          })}
          type="password"
        />
      </InputContainer>
    </form>
  );
}
Example #2
Source File: function-components-context.input.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const { register } = useFormContext();

  return (
    <form>
      <input ref={register({ required: true })} name="example" />
      <input ref={register()} name="example-2" />
      <input ref={register} name="example-3" />
      <input ref="useless-ref" name="example" />
    </form>
  );
}
Example #3
Source File: index.js    From hook-form-mui with MIT License 6 votes vote down vote up 
function FormCheckBox(props) {
  const { control } = useFormContext();
  const { name, label } = props;
  return (
    <React.Fragment>
      <Controller
        as={MuiCheckbox}
        name={name}
        control={control}
        defaultValue={false}
        label={label}
        {...props}
      />
    </React.Fragment>
  );
}
Example #4
Source File: with-formState-2-context.output.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const {
    formState,
  } = useFormContext();

  const {
    errors,
  } = formState;

  const diry = formState.isDirty;

  return (
    <form>
      <span>{errors.username.message}</span>
    </form>
  );
}
Example #5
Source File: with-formState-3-context.input.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const { errors: customErrors, formState } = useFormContext();

  const diry = formState.isDirty;

  return (
    <form>
      <span>{errors.username.message}</span>
    </form>
  );
}
Example #6
Source File: with-formState-3-context.output.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const {
    formState,
  } = useFormContext();

  const {
    errors: customErrors,
  } = formState;

  const diry = formState.isDirty;

  return (
    <form>
      <span>{errors.username.message}</span>
    </form>
  );
}
Example #7
Source File: already-migrated-context.input.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const { register } = useFormContext();

  return (
    <form>
      <input {...register('example', { required: true })} />
      <input {...register('example-2')} />
      <input {...register('example-3')} />
      <input ref="useless-ref" name="example" />
    </form>
  );
}
Example #8
Source File: function-component-2-context.output.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const { register, handleSubmit } = useFormContext();

  return (
    <form onSubmit={handleSubmit}>
      <InputContainer label="Email">
        <Input {...register('email')} autoComplete="username" />
      </InputContainer>
      <InputContainer label="Password *">
        <Input
          {...register('password', {
            required: true,
            validate: (value) => !!value
          })}
          type="password" />
      </InputContainer>
    </form>
  );
}
Example #9
Source File: function-component-context.input.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const { register } = useFormContext();

  useEffect(() => {
    register('example');
  }, [register]);

  return (
    <form>
      <input ref={register({ required: true })} name="example" />
      <input ref={register()} name="example-2" />
      <input ref={register} name="example-3" />
      <Input ref={register} name="example-4" />
      <input ref="useless-ref" name="example" />
    </form>
  );
}
Example #10
Source File: function-component-context.output.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const { register } = useFormContext();

  useEffect(() => {
    register('example');
  }, [register]);

  return (
    <form>
      <input {...register('example', { required: true })} />
      <input {...register('example-2')} />
      <input {...register('example-3')} />
      <Input {...register('example-4')} />
      <input ref="useless-ref" name="example" />
    </form>
  );
}
Example #11
Source File: with-formState-2-context.input.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const { errors, formState } = useFormContext();

  const diry = formState.isDirty;

  return (
    <form>
      <span>{errors.username.message}</span>
    </form>
  );
}
Example #12
Source File: function-components-context.input.js    From codemod with MIT License 6 votes vote down vote up 
Form2 = () => {
  const { register } = useFormContext();

  return (
    <form>
      <input ref={register({ required: true })} name="example" />
      <input ref={register()} name="example-2" />
      <input ref={register} name="example-3" />
      <input ref="useless-ref" name="example" />
    </form>
  );
}
Example #13
Source File: function-components-context.output.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const { register } = useFormContext();

  return (
    <form>
      <input {...register('example', { required: true })} />
      <input {...register('example-2')} />
      <input {...register('example-3')} />
      <input ref="useless-ref" name="example" />
    </form>
  );
}
Example #14
Source File: function-components-context.output.js    From codemod with MIT License 6 votes vote down vote up 
Form2 = () => {
  const { register } = useFormContext();

  return (
    <form>
      <input {...register('example', { required: true })} />
      <input {...register('example-2')} />
      <input {...register('example-3')} />
      <input ref="useless-ref" name="example" />
    </form>
  );
}
Example #15
Source File: ConnectButton.jsx    From tinkerun with MIT License 6 votes vote down vote up 
ConnectButton = (props) => {
  const {handleSubmit} = useFormContext()

  const onSubmit = data => {
    connectConnection(data)
  }

  return (
    <Button
      height={majorScale(3)}
      onClick={handleSubmit(onSubmit)}
      {...props}
    >
      <FormattedMessage
        id='connections.connect'
      />
    </Button>
  )
}
Example #16
Source File: OverSSHButton.jsx    From tinkerun with MIT License 6 votes vote down vote up 
OverSSHButton = props => {
  const {control} = useFormContext()

  return (
    <Controller
      name='is_over_ssh'
      control={control}
      defaultValue={false}
      render={({
        field: {value, onChange},
      }) => (
        <Button
          height={majorScale(3)}
          onClick={() => onChange(!value)}
          isActive={value}
          {...props}
        >
          <FormattedMessage id='connections.over_ssh'/>
        </Button>
      )}
    />
  )
}
Example #17
Source File: PathField.jsx    From tinkerun with MIT License 6 votes vote down vote up 
PathField = () => {
  const intl = useIntl()
  const {errors, watch, setValue, register} = useFormContext()

  const isOverSSH = watch('is_over_ssh')

  return (
    <Pane
      display='flex'
    >
      <Field
        label={intl.formatMessage({id: 'connections.path'})}
        flex={1}
      >
        <TextInput
          height={majorScale(3)}
          placeholder='/var/www/html'
          width='100%'
          name='path'
          {...register('path')}
        />
      </Field>

      {!isOverSSH && (
        <Button
          height={majorScale(3)}
          marginLeft={16}
          flexShrink={0}
          onClick={() => setValue('path', selectDirectory())}
        >
          <FormattedMessage id='connections.select_directory'/>
        </Button>
      )}
    </Pane>
  )
}
Example #18
Source File: SSHKeyButton.jsx    From tinkerun with MIT License 6 votes vote down vote up 
SSHKeyButton = () => {
  const {control} = useFormContext()

  return (
    <Controller
      name='ssh_key'
      control={control}
      defaultValue={''}
      render={({
        field: {value, onChange},
      }) => {
        return (
          <Pane
            display='flex'
            alignItems='center'
          >
            <Button
              height={majorScale(3)}
              onClick={() => onChange(selectFile())}
              intent={value === '' ? 'none' : 'success'}
              marginRight={majorScale(1)}
            >
              {value
                ? value.split('/').pop()
                : <FormattedMessage id='connections.import_ssh_key'/>
              }
            </Button>

            <SSHKeyTooltip/>
          </Pane>
        )
      }}
    />
  )
}
Example #19
Source File: TagSelector.jsx    From tinkerun with MIT License 6 votes vote down vote up 
TagSelector = () => {
  const {control} = useFormContext()

  return (
    <Controller
      name='tag'
      control={control}
      defaultValue='local'
      render={({
        field: {value, onChange},
      }) =>
        <Select
          height={majorScale(3)}
          value={value}
          onChange={e => onChange(e.target.value)}
        >
          <option value="local">local</option>
          <option value="testing">testing</option>
          <option value="development">development</option>
          <option value="staging">staging</option>
          <option value="production">production</option>
        </Select>
      }
    />
  )
}
Example #20
Source File: with-formState-1-context.input.js    From codemod with MIT License 6 votes vote down vote up 
Form = () => {
  const { errors, formState: { isDirty } } = useFormContext();

  return (
    <form>
      <span>{errors.username.message}</span>
    </form>
  );
}
Example #21
Source File: index.js    From hook-form-mui with MIT License 6 votes vote down vote up 
function FormDatePicker(props) {
  const { control } = useFormContext();
  const { name, label } = props;

  return (
    <React.Fragment>
      <MuiPickersUtilsProvider utils={MomentUtils}>
        <Controller
          as={MuiDatePicker}
          name={name}
          control={control}
          label={label}
          defaultValue={null}
          {...props}
        />
      </MuiPickersUtilsProvider>
    </React.Fragment>
  );
}
Example #22
Source File: index.js    From hook-form-mui with MIT License 6 votes vote down vote up 
function FormInput(props) {
  const { control } = useFormContext();
  const { name, label, required, errorobj } = props;
  let isError = false;
  let errorMessage = "";
  if (errorobj && errorobj.hasOwnProperty(name)) {
    isError = true;
    errorMessage = errorobj[name].message;
  }

  return (
    <Controller
      as={TextField}
      name={name}
      control={control}
      defaultValue=""
      label={label}
      fullWidth={true}
      InputLabelProps={{
        className: required ? "required-label" : "",
        required: required || false,
      }}
      error={isError}
      helperText={errorMessage}
      {...props}
    />
  );
}
Example #23
Source File: index.js    From hook-form-mui with MIT License 6 votes vote down vote up 
function FormRadio(props) {
  const { control } = useFormContext();
  const { name, label } = props;
  return (
    <React.Fragment>
      <Controller
        as={MuiRadio}
        name={name}
        control={control}
        defaultValue=""
        label={label}
        {...props}
      />
    </React.Fragment>
  );
}
Example #24
Source File: index.js    From hook-form-mui with MIT License 6 votes vote down vote up 
function FormSelect(props) {
  const { control } = useFormContext();
  const { name, label } = props;
  return (
    <React.Fragment>
      <Controller
        as={MuiSelect}
        control={control}
        name={name}
        label={label}
        defaultValue=""
        {...props}
      />
    </React.Fragment>
  );
}
Example #25
Source File: index.js    From hook-form-mui with MIT License 6 votes vote down vote up 
function FormSelectAutoComplete(props) {
  const { control } = useFormContext();
  const { name, label, options } = props;

  const [newData, setNewData] = useState([]);

  useEffect(() => {
    const newOptions = options.map((data, index) => ({
      label: data.label,
      value: data.id,
    }));
    setNewData(newOptions);
  }, [options]);

  return (
    <React.Fragment>
      <Controller
        as={ReactSelect}
        name={name}
        control={control}
        label={label}
        defaultValue={[]}
        {...props}
        options={newData}
      />
    </React.Fragment>
  );
}
Example #26
Source File: Action.jsx    From pooltogether-governance-ui with MIT License 6 votes vote down vote up 
CustomContractInputRinkeby = (props) => {
  const { contract, setContract, contractPath } = props
  const { t } = useTranslation()
  const { register } = useFormContext()

  return (
    <>
      <SimpleInput
        className='mt-2'
        label={t('contractAddress')}
        name={`${contractPath}.address`}
        register={register}
        required
        validate={(address) => isValidAddress(address) || t('invalidContractAddress')}
        placeholder='0x1f9840a85...'
      />
      <CustomAbiInput contract={contract} setContract={setContract} />
    </>
  )
}
Example #27
Source File: Action.jsx    From pooltogether-governance-ui with MIT License 6 votes vote down vote up 
FunctionInputs = (props) => {
  const { fn, fnPath } = props
  const { t } = useTranslation()
  const { register } = useFormContext()

  const inputs = fn?.inputs || []

  return (
    <ul className='mt-2'>
      {inputs.map((input, index) => (
        <FunctionInput
          {...input}
          key={`${fnPath}-${fn.name}-${input.name}`}
          fnInputPath={`${fnPath}.values[${input.name}]`}
        />
      ))}
      {fn.payable && (
        <li className='mt-2 first:mt-0 flex'>
          <SimpleInput
            key={`${fnPath}-${fn.name}-payable`}
            label={'payableAmount'}
            name={`${fnPath}.payableAmount`}
            register={register}
            type='number'
            validate={(value) => value >= 0 || t('fieldIsInvalid', { field: 'payableAmount' })}
            dataType={'ETH'}
          />
        </li>
      )}
    </ul>
  )
}
Example #28
Source File: Action.jsx    From pooltogether-governance-ui with MIT License 6 votes vote down vote up 
FunctionInput = (props) => {
  const { t } = useTranslation()
  const { name, type, fnInputPath, components } = props
  const { register, unregister, formState } = useFormContext()

  useEffect(() => {
    return () => {
      unregister(`${fnInputPath}`)
    }
  }, [])

  return (
    <li className='mt-2 first:mt-0 flex'>
      <SimpleInput
        label={name}
        name={`${fnInputPath}`}
        register={register}
        validate={(value) => isValidSolidityData(type, value, components) || `${name} is invalid`}
        dataType={type}
      />
    </li>
  )
}
Example #29
Source File: ProposalCreationForm.jsx    From pooltogether-governance-ui with MIT License 6 votes vote down vote up 
TitleCard = (props) => {
  const { t } = useTranslation()
  const { register } = useFormContext()

  return (
    <Card className='mb-6'>
      <h4 className='mb-2'>{t('title')}</h4>
      <p className='mb-6'>{t('theTitleIsDescription')}</p>
      <TextInputGroup
        className='border-accent-3'
        bgClasses='bg-body'
        alignLeft
        placeholder={t('enterTheTitleOfYourProposal')}
        id='_proposalTitle'
        label={t('proposalTitle')}
        name='title'
        required={t('blankIsRequired', { blank: t('title') })}
        register={register}
      />
    </Card>
  )
}