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

1 vote299 views1 answer
How to store array into react-native local storage
Javascript React
2 votes297 views2 answers
Chrome back button click event react
Javascript React
1 vote302 views3 answers
Window.innerHeight react js
Javascript React
1 vote288 views1 answer
Typeerror object(...) is not a function react useParams
Javascript React
1 vote329 views1 answer
React conditional array item
Javascript React
0 vote315 views1 answer
React native carriage return
Javascript React
0 vote321 views1 answer
How to prevent previous radio button active react native
Javascript React
0 vote289 views1 answer
React native fade in fade out animation
Javascript React
0 vote316 views1 answer
Command reboot android app react native adb command
Javascript React
5 votes345 views3 answers
CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker"
Javascript React