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

Fajar Muhamad — Sun, 15 Jun 2025 05:50:08 +0000

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:

Terima kasih sudah membaca, rispek guys 🫡

untuk link github: disini

Reusable Input: Dari Yang Sederhana Dulu (Bagian 1)

Fajar Muhamad — Sat, 24 May 2025 06:45:39 +0000

Halo semuanya, sebagai reactjs developer saya ingin sharing tentang permasalahan yang menjadi benak saya untuk memulai suatu projek.

Pada dasarnya, sering kali setiap menjalankan projek, saya pribadi menggunakan library tambahan untuk komponen yang ingin digunakan.

Kali ini saya ingin mengeksplor diri saya dengan membuat komponen itu sendiri, dan semaksimal mungkin tidak menambahkan depedensi lain.

Hal Pertama, Input Komponen Yang Akan Digunakan

Contoh design input yang ingin digunakan

Pembagian kolom

Disclaimer! Pada pembuatan ini tidak mengacu pada pixel perfect desain

dari gambar diatas dapat kita bedah:

Komponen tersebut akan terdapat properti untuk required
Terdapat 2 kolom, untuk menampilkan label, dan komponen input
Terdapat rounded border, padding, font style, outline saat hover

Mari Kita Buat!

instal dahulu agar dapat menggunakan react, saya menggunakan react-vite untuk pilihan bebas yang penting react 😅.

npm create vite . -- --templte react~
bisa kalian cek di sini

setelah itu mari membuat komponen Input.jsx dengan sederhana dahulu

//component Input.jsx
const Input = (props) => {
  const {
    onChange,
    placeholder,
    value,
    label,
    type = "text",
    required = false,
  } = props;
  return (
    <div>
      <label>
        {label}
        <span>{required && "*"}</span>
      </label>
      <input
        value={value ?? ""}
        onChange={(event) => onChange(event.target.value)}
        type={type}
        placeholder={placeholder}
        required={required}
      />
    </div>
  );
};

export default Input;

lalu pada pemakaian di parent komponen

//Parent Component
import { useState } from "react";
import "./App.css";
import Input from "./Input";

function App() {
  const [value, setValue] = useState("");
  const InputChange = (val) => {
    setValue(val);
  };

  return (
    <>
      <Input
        value={value}
        label="nama"
        placeholder="Type name here..."
        onChange={InputChange}
        required
      />
    </>
  );
}

export default App;

Hasil Input sederhana

Melakukan Styling Pada Komponen

//component Input.jsx
const Input = (props) => {
  const {
    onChange,
    placeholder,
    value,
    label,
    type = "text",
    required = false,
  } = props;
  return (
    <div className="grid grid-cols-4 gap-1 items-center w-full">
      <label className="col-span-1 font-bold text-base capitalize text-gray-600">
        {label}
        <span>{required && "*"}</span>
      </label>
      <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-600 rounded-md transition-colors duration-200 border-gray-300 outline-none border-2 focus:border-pink-400"
        placeholder={placeholder}
        required={required}
      />
    </div>
  );
};

export default Input;

Komponen input setelah styling

Terima kasih sudah membaca! 🫡 Rispek guys!

github/learn-build/component