MENU
LUISVELITO
COMPO
NENTES
In order to show my progress as a dev I will make some components to share with you guys! Will be adding them little by little.
Custom ComboBox
Simple options.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const options: Option[] = [
{ name: "Option 1", code: "1" },
{ name: "Option 2", code: "2" },
{ name: "Option 3", code: "3" },
];
function App() {
return (
<div className="App">
<CustomComboBox
options={options}
placeholder="Select an option..."
/>
</div>
);
}
Custom ComboBox
Ligth Mode and Geocode options.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const options: Option[] = [
{ name: "Option 1", code: "1" },
{ name: "Option 2", code: "2" },
{ name: "Option 3", code: "3" },
];
function App() {
return (
<div className="App">
<CustomComboBox
options={options}
placeholder="Select an option..."
countryIcon
ligthMode
/>
</div>
);
}Custom ComboBox
Content before the input option.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const options: Option[] = [
{ name: "Option 1", code: "1" },
{ name: "Option 2", code: "2" },
{ name: "Option 3", code: "3" },
];
function App() {
return (
<div className="App">
<CustomComboBox
options={options}
placeholder="Select an option..."
beforeInput={<Icon />}
/>
</div>
);
}Custom ComboBox
Multiple options.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const options: Option[] = [
{ name: "Option 1", code: "1" },
{ name: "Option 2", code: "2" },
{ name: "Option 3", code: "3" },
];
function App() {
return (
<div className="App">
<CustomComboBox
options={options}
placeholder="Select an option..."
multiple
/>
</div>
);
}