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 vote351 views1 answer
How to only register one click on nested component and not parent component in react js
Javascript React
11 votes387 views3 answers
React app and tailwind
Javascript React
0 vote365 views1 answer
React native custom debounce input
Javascript React
108 votes386 views2 answers
Make react project
Javascript React
0 vote333 views1 answer
React cleanup meas
Javascript React
0 vote347 views1 answer
How to link to a different component in reactjs without react router
Javascript React
8 votes374 views2 answers
React set title of page
Javascript React
1 vote420 views1 answer
Interpolation react
Javascript React
16 votes349 views6 answers
React useState hook
Javascript React
0 vote411 views1 answer
React native undedined map
Javascript React