React-hook-form input

React-hook-form-input npm

import React from 'react';import useForm from 'react-hook-form';import { RHFInput } from 'react-hook-form-input';import Select from 'react-select'; const options = [  { value: 'chocolate', label: 'Chocolate' },  { value: 'strawberry', label: 'Strawberry' },]; function App() {  const { handleSubmit, register, setValue, reset } = useForm();   return (    <form onSubmit={handleSubmit(data => console.log(data))}>      <RHFInput        as={<Select options={options} />}        rules={{ required: true }}        name="reactSelect"        register={register}        setValue={setValue}      />      <button type="button">        Reset Form      </button>      <button>submit</button>    </form>  );}

Source: npmjs.com

React-hook-form input

export function Input({
  name, control, validationRules, errorMessage
}: TProps) {
  const { field: { value, onChange }, formState: { errors } } = useController({
    name,
    control,
    rules: {
      required: true,
      pattern: {
        value: validationRules,
        message: errorMessage
      }
    }
  })

  return (

    <div className={mainCssClass}>
      <label className={`${mainCssClass}__label`} htmlFor={name}>{name}</label>
      <input
        placeholder={name}
        value={value}
        className={`${mainCssClass}__input`}
        onChange={onChange}
      />
      {errors?.[name] && <span>{errorMessage}</span>}
    </div>

  )
}

React-hook-form-input npm

$ npm install react-hook-form-input

Source: npmjs.com

Similar codes

0 vote150 views1 answer
React-native-error-check-the-render-method-of-app
Javascript React
0 vote147 views1 answer
React function runs several times
Javascript React
0 vote159 views1 answer
React-multi-carousel don't work
Javascript React
0 vote158 views1 answer
React native getting older version assets
Javascript React
0 vote146 views1 answer
How to convert timestamp to date in react native
Javascript React
158 votes309 views6 answers
React create app
Javascript React
10 votes136 views2 answers
React text input onchange
Javascript React
2 votes142 views2 answers
React material ui media queries
Javascript React
0 vote144 views1 answer
React redux open another page
Javascript React
0 vote134 views1 answer
Route guards in react
Javascript React