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
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;
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;
Terima kasih sudah membaca! 🫡 Rispek guys!
Top comments (0)