@dayoesq/input-component v2.3.0

DYNAMIC INPUT COMPONENT

This package is a React hook for control input elements. It is extendable but at the time of this version, it works fine with the following elements:

• input type of text
• input type of number
• input type of password
• input type of email
• textarea element.

It is written in typescript and therefore enjoys full type support.

USAGE

npm install --save @dayoesq/input-component

Create a React Component

import { FC } from "react";
import {
  Input,
  useForm,
  VALIDATOR_EMAIL,
  VALIDATOR_MINLENGTH,
  VALIDATOR_REQUIRE,
} from "@dayoesq/input-component";

const App: FC = () => {
  const [isLoggedInMode, setIsLoggedInMode] = useState<boolean>(false);
  const [formState, inputHandler, setFormData] = useForm<{
    name: {
      value: string;
      isValid: boolean;
    };
    email: {
      value: string;
      isValid: boolean;
    };
    password: {
      value: string;
      isValid: boolean;
    };
    notes: {
      value: string;
      isValid: boolean;
    };
  }>(
    {
      name: {
        value: "",
        isValid: false,
      },
      email: {
        value: "",
        isValid: false,
      },
      password: {
        value: "",
        isValid: false,
      },
      notes: {
        value: "",
        isValid: false,
      },
    },
    false
  );

  // It is also possible to modify the data conditionally:
  const checkLoginMode = () => {
    if(!isLoggedInMode) {
      setFormData(
        {
          ...formState.inputs,
          name: {
            value: "",
            isValid: false
          },
          email: {
            value: "",
            isValid: false
          }
        },
        false
      )
    }
  };

  const submitHandler = async (event: React.FormEvent) => {
    event.preventDefault();
    const data = {
      name: formState.inputs?.name.value,
      email: formState.inputs?.email.value,
      password: formState.inputs?.password.value,
      notes: formState.inputs?.notes.value,
    };
    try {
      const res = await fetch("/url", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json",
        },
      });
      const resData = await res.json();
      if(!res.ok) throw new Error(res.message)
      console.log(resData);
    } catch(err) {
      console.log(err.message);
    }
  };

  return (
    <form onSubmit={submitHandler}>
      <Input
        element="input"
        id="name"
        type="text"
        label="Name"
        placeholder="Enter name"
        onInput={inputHandler}
        errorText="The name is required"
        validators={[VALIDATOR_REQUIRE()]}
        // className="" add styles as you like...
        // style={} inline also possible...
        // backErrorText="Error from the backend"
      />
      <Input
        element="input"
        id="email"
        type="email"
        label="Email"
        placeholder="Enter email"
        onInput={inputHandler}
        errorText="Please provide a valid email"
        validators={[VALIDATOR_EMAIL()]}
      />
      <Input
        element="input"
        id="password"
        type="password"
        label="Password"
        placeholder="Enter password"
        onInput={inputHandler}
        errorText="Password cannot be less than 6 characters"
        validators={[VALIDATOR_MINLENGTH(6)]}
      />
      <Input
        element="textarea"
        id="notes"
        label="Notes"
        placeholder="Write something..."
        onInput={inputHandler}
        errorText="This field cannot be empty"
        validators={[VALIDATOR_REQUIRE()]}
      />
      <button type="submit" disabled={!formState.isValid}>
        Submit
      </button>
    </form>
  );
};

export default App;

KEY COMPONENTS

VALIDATORS

There are alltogether 7 validators and all of them are functions:

1. VALIDATOR_REQUIRE returns false if the field is empty otherwise true.
2. VALIDATOR_EMAIL uses Regex behind the scenes to check email validity.
3. VALIDATOR_MINLENGTH checks the length of string based on the provided argument. E.g VALIDATOR_MINLENGTH(6) return false if the user provided string is less than 6.
4. VALIDATOR_MAXLENGTH checks the length of string based on the provided argument. E.g VALIDATOR_MAXLENGTH(6) return false if the user provided string is greater than 6.
5. VALIDATOR_MIN checks the value of the provided NUMBER. E.g VALIDATOR_MIN(6) return false if the user provided NUMBER is less than 6.
6. VALIDATOR_MAX checks the value of the provided NUMBER. E.g VALIDATOR_MAX(6) return false if the user provided NUMBER is greater than 6.
7. VALIDATOR_PASSWORD_CONFIRM checks if the password field is not empty and the passwordConfirm is the same as the original password. E.g

<Input
    element="input"
    id="passwordConfirm"
    type="password"
    label="Password Confirm"
    onInput={inputHandler}
    errorText="Passwords do not match"
    validators={[VALIDATOR_PASSWORD_CONFIRM(formState.inputs?.password.value)]}
/>