DEV Community

Cover image for Reusable Input: Dari Yang Sederhana Dulu (Bagian 1)
Fajar Muhamad
Fajar Muhamad

Posted on

Reusable Input: Dari Yang Sederhana Dulu (Bagian 1)

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

Contoh design input yang ingin digunakan

Pembagian kolom

Pembagian kolom

Disclaimer! Pada pembuatan ini tidak mengacu pada pixel perfect desain

dari gambar diatas dapat kita bedah:

  1. Komponen tersebut akan terdapat properti untuk required
  2. Terdapat 2 kolom, untuk menampilkan label, dan komponen input
  3. 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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Hasil input sederhana

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;
Enter fullscreen mode Exit fullscreen mode

Input styling

Komponen input setelah styling



Terima kasih sudah membaca! 🫡 Rispek guys!

github/learn-build/component

Top comments (0)