Input

This component will allow you to create a form with multiple inputs. What you should do is create an object with values such as strings, numbers; among others, then extract the useInput hook (as shown below).

You must pass this object as a value to the initialInput property, this hook returns 1 variable (inputState) and two functions (handleInputChange, resetInput).

The inputState state variable contains the state of all the inputs and each value is accessed as inputState.name, etc. or you can also directly extract all the properties without the need for the state variable. The handleInputChange function sets the state of each input. resetInput resets it to its initial state.

The 'name' prop is required to handle all the states correctly and it must be called exactly the same as the properties of the object

If you only need a single input, you'll encounter an error because this hook is designed to receive objects. If you want to control just one input, you'll find how to use useState with that component later on.

import { useInput } from "dialui-components/dist/hooks";
import { Input } from "dialui-components";

const initialForm = {
  name: "",
  phone: 0,
};

export const MyComponent = () => {
  const { inputState, handleInputChange } = useInput({ initialInput: initialForm });
  // Alternative :
  // const { name, phone , handleInputChange } = useInput({ initialInput: initialForm });

  return (
    <>
      <Input
        type="text"
        value={inputState.name} /*or {name}*/
        placeholder="Name"
        name="name"
        onChange={handleInputChange}
      />
      <Input
        type="phone"
        value={inputState.phone} /*or {phone}*/
        placeholder="Phone"
        name="phone"
        onChange={handleInputChange}
      />
    </>
  );
};

import { useState } from "react";
import { Input } from "dialui-components";

export const MyComponent = () => {
  const [ name, setName ] = useState("");

  return (
    <Input
      type="text"
      value={name}
      placeholder="Name"
      name="name"
      onChange={(e) => setName(e.target.value)}
    />
  );
};