React Form Hook With Custom Inputs

react-form-hook-with-custom-inputs.jsx

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import useForm from "react-hook-form";
import Input from "@material-ui/core/Input";
import Select from "react-select";
import { Input as StrapInput } from "reactstrap";

import "./index.css";
import { TextField } from "@material-ui/core";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const MyInput = ({ name, label, register }) => {
  return (
    <>
      <label htmlFor={name}>{label}</label>
      <input name={name} placeholder="Jane" ref={register} />
    </>
  );
};

function App() {
  const [val, setVal] = React.useState("");
  const { register, handleSubmit, setValue } = useForm();
  const onSubmit = data => {
    alert(JSON.stringify(data, null));
  };
  const [values, setReactSelect] = useState({
    selectedOption: []
  });

  const handleMultiChange = selectedOption => {
    setValue("reactSelect", selectedOption);
    setReactSelect({ selectedOption });
  };

  useEffect(() => {
    register({ name: "reactSelect", required: true });
  }, []);

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <TextField
            style={{
              marginBottom: "20px"
            }}
            name="HelloWorld"
            value={val}
            onChange={e => setVal(e.target.value)}
            inputRef={register}
            placeholder="Material UI - Input"
            inputProps={{
              "aria-label": "Description"
            }}
          />
        </div>

        <div>
          <StrapInput
            placeholder="Strap - Input"
            name="strapInput"
            innerRef={register}
          />
        </div>

        <div>
          <lable className="reactSelectLabel">React select</lable>
          <Select
            className="reactSelect"
            name="filters"
            placeholder="Filters"
            value={values.selectedOption}
            options={options}
            onChange={handleMultiChange}
            isMulti
          />
        </div>

        <div>
          <MyInput name="firstName" label="First Name" register={register} />
        </div>

        <div>
          <label htmlFor="lastName">Last Name</label>
          <input name="lastName" placeholder="Luo" ref={register} />
        </div>

        <div>
          <label htmlFor="email">Email</label>
          <input
            name="email"
            placeholder="[email protected]"
            type="email"
            ref={register}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

• https://react-hook-form.com/get-started#WorkwithUIlibrary
• https://codesandbox.io/s/react-hook-form-custom-input-b5lll?from-embed
• https://github.com/JedWatson/react-select