Reusable Input: Penambahan Props Yang Dibutuhkan (Bag. 2)

#learning #webdev #react #webcomponents

Melanjutkan pembuatan reusable input yang telah dilakukan sebelumnya, kali ini akan menambahkan untuk props validation dan accessibility.

Perbaikan Props Validation

jika ingin menggunakan reusable component input perlu dibutuhkan props validation agar component itu tidak keluar dari aturan yang di inginkan.

Pada komponent input ini, kita menginginkan komponen yang menghasilkan nilai string,tanpa berlama-lama tambahkan depedency prop-types jika menggunakan react javascript.

npm run prop-types

setelah install package, import prop-types pada komponen input yang digunakan

import PropTypes from "prop-types";

lalu pada bagian penggunaan prop-types tambahkan setelah deklarasi komponen

Input.propTypes = {
  onChange: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
  value: PropTypes.string,
  label: PropTypes.string.isRequired,
  type: PropTypes.string,
  required: PropTypes.bool,
};

Penjelasan:

Input pemanggilan komponen yang digunakan
propTypes deklarasi penggunaan fungsi pada komponen
nilai {} untuk propTypes berupa object, membatasi tipe data yang akan digunakan

Perbaikan Accessibility

pada bagian accessibility ini, kita menambahkan id pada props input

Input.propTypes = {
  onChange: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
  value: PropTypes.string,
  label: PropTypes.string.isRequired,
  type: PropTypes.string,
  required: PropTypes.bool,
  id: PropsTypes.string
};

lalu pada komponen jsx untuk label menjadi seperti ini

<label
  htmlFor="input"
  className="col-span-1 font-bold text-base capitalize text-gray-700">
   {label}
   {required && (
     <span className="text-red-500 ml-1" aria-label="required">*</span>
   )}
</label>

Penambahan:

htmlFor kegunaan untuk mengikat tag label pada elemen tertentu (input)
aria-label kegunaan untuk menyediakan keterangan pada fitur di web browser untuk pengguna berkebutuhan khusus bisa cek di sini untuk lengkapnya penggunaan atribut aria

selanjutnya pada bagian tag input

 <input
  id="input"
  value={value ?? ""}
  onChange={(event) => onChange(event.target.value)}
  type={type}
  className="col-span-3 bg-white w-full px-4 py-2 text-base font-medium text-gray-700 rounded-md transition-colors duration-200 border-gray-300 outline-none border-2 focus:border-pink-400 focus:ring-2 focus:ring-pink-100"
  placeholder={placeholder}
  required={required}
  aria-required={required}
/>

untuk kenyamanan id dan htmlFor tidak akan digunakan secara hard code, tetapi kita akan memberikan kondisi agar tetap responsif, tambahkan baris ini sebelum return jsx

  const inputId = id || `input-${label?.toLowerCase().replace(/\s+/g, "-")}`;

dan full code akan terlihat seperti ini

// Input.jsx - Perbaikan tahap 2
import PropTypes from "prop-types";

const Input = (props) => {
  const {
    onChange,
    placeholder,
    value,
    label,
    type = "text",
    required = false,
    id,
  } = props;

  const inputId = id || `input-${label?.toLowerCase().replace(/\s+/g, "-")}`;

  return (
    <div className="grid grid-cols-4 gap-4 items-center w-full">
      <label
        htmlFor={inputId}
        className="col-span-1 font-bold text-base capitalize text-gray-700"
      >
        {label}
        {required && (
          <span className="text-red-500 ml-1" aria-label="required">
            *
          </span>
        )}
      </label>
      <input
        id={inputId}
        value={value ?? ""}
        onChange={(event) => onChange(event.target.value)}
        type={type}
        className="col-span-3 bg-white w-full px-4 py-2 text-base font-medium text-gray-700 rounded-md transition-colors duration-200 border-gray-300 outline-none border-2 focus:border-pink-400 focus:ring-2 focus:ring-pink-100"
        placeholder={placeholder}
        required={required}
        aria-required={required}
      />
    </div>
  );
};

// ✅ Props validation
Input.propTypes = {
  onChange: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
  value: PropTypes.string,
  label: PropTypes.string.isRequired,
  type: PropTypes.string,
  required: PropTypes.bool,
  id: PropTypes.string,
};

export default Input;

dan hasil akhir akan tampak seperti ini: