Form Validation with Formik, Yup & React Router v6 • Edwards Moses - Web, Mobile - React & React Native Software Developer

[utterances-bot]

Form Validation with Formik, Yup & React Router v6 • Edwards Moses - Web, Mobile - React & React Native Software Developer

In this article, we will explore how to use Formik and Yup with the new React router version, and we will provide code examples to help you get started quickly

https://edwardsmoses.com/form-validation-with-react-router-v6?utterances=9c30740e0dcb1d00611f0eebjTcNdDkPRqmo0LWbudLEzoCVNyBg3ixyrHbJOATq%2Fz1RULAypYCz1wUlcaSMG8eUtxJFIIhRik%2FeBy203doC%2FHqoZTEo%2FtCpVlMYWemw9ws8mEFyCE%2F4mZrTEd0%3D

[ashe0047]

Hello! Can I know which Input component are you using?

[edwardsmoses]

Hi @ashe0047, Using a pretty simple input component - here's an example:

import clsx from "clsx";
import React, { HTMLInputTypeAttribute, LegacyRef, MutableRefObject, useEffect, useRef } from "react";

type Props = {
  label: string;
  type?: HTMLInputTypeAttribute;
  id?: string;
  name?: string;
  value?: string;
  onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
  onFocus?: (
    event: React.FocusEvent<HTMLInputElement, Element> | React.FocusEvent<HTMLTextAreaElement, Element>
  ) => void;
  onBlur?: (
    event: React.FocusEvent<HTMLInputElement, Element> | React.FocusEvent<HTMLTextAreaElement, Element>
  ) => void;
  errorMessage?: string;
  inputRef?: any;
  className?: string;
};

export const Input = (props: Props) => {
  const {
    label,
    id,
    type,
    value,
    onChange,
    name,
    errorMessage,
    inputRef,
    onFocus,
    onBlur,
    className,
  } = props;

  return (
    <div className="flex flex-col space-y-1">
      <div className="relative">
        <input
          {...props}
          className={clsx(
            "block rounded-lg px-2.5 pb-2.5 pt-5 w-full text-base  bg-gray-700 border-0 appearance-none text-gray-100  dark:focus:border-primary focus:outline-none focus:ring-0 focus:border-primary peer",
            className
          )}
        />
        <label
          htmlFor={id}
          className="absolute text-sm text-primary -translate-y-4 font-medium duration-300 transform  scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-primary peer-placeholder-shown:text-gray-100  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:font-bold cursor-text"
        >
          {label}
        </label>
      </div>
      {!!errorMessage && <p className="mt-2 text-sm text-red-600 font-medium text-left pl-1">{errorMessage}</p>}
    </div>
  );
};

Let me know if that answers your question - I'll be happy to expand more.

[ashe0047]

@edwardsmoses Thank you so much for your explanation. Truly appreciate it! :)