Cómo implementar un Dropdown con Semantic UI y React
- Paso 1: Importar Semantic UI CSS
- Paso 2: Importar Componentes Necesarios
- Paso 3: Definir Opciones del Dropdown
- Paso 4: Crear el Componente Dropdown
- Paso 5: Renderizar el Componente en tu Aplicación
Paso 1: Importar Semantic UI CSS
Primero, asegúrate de importar el CSS de Semantic UI en tu proyecto. Normalmente, esto se hace en el archivo index.js o App.js:
import 'semantic-ui-css/semantic.min.css';Paso 2: Importar Componentes Necesarios
Luego, importa los componentes de Semantic UI necesarios para crear el dropdown:
import React, { useState } from 'react';
import { Dropdown } from 'semantic-ui-react';Paso 3: Definir Opciones del Dropdown
Crea un array con las opciones que quieres mostrar en tu dropdown. Cada opción es un objeto con las propiedades key, text y value:
const options = [
{ key: 'angular', text: 'Angular', value: 'angular' },
{ key: 'react', text: 'React', value: 'react' },
{ key: 'vue', text: 'Vue', value: 'vue' },
];Paso 4: Crear el Componente Dropdown
Ahora, puedes crear el componente Dropdown. Utilizaremos el hook useState para manejar el estado del valor seleccionado:
const DropdownExample = () => {
const [selectedValue, setSelectedValue] = useState('');
const handleChange = (e, { value }) => {
setSelectedValue(value);
console.log("Valor seleccionado:", value);
};
return (
<Dropdown
placeholder='Selecciona una opción'
fluid
selection
options={options}
onChange={handleChange}
value={selectedValue}
/>
);
};Paso 5: Renderizar el Componente en tu Aplicación
Finalmente, renderiza el componente DropdownExample en tu aplicación:
import React from 'react';
import ReactDOM from 'react-dom';
import DropdownExample from './DropdownExample';
const App = () => (
<div>
<h2>Ejemplo de Dropdown con Semantic UI y React</h2>
<DropdownExample />
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));Personalización Adicional
Puedes personalizar el dropdown de muchas maneras, incluyendo:
- Placeholder: Cambiar el texto que aparece antes de seleccionar una opción.
- Fluid: Hacer que el dropdown ocupe todo el ancho disponible.
- Selection: Estilizar el dropdown como un menú desplegable.
Ejemplo con Placeholder Personalizado y Sin Fluid
const DropdownExample = () => {
const [selectedValue, setSelectedValue] = useState('');
const handleChange = (e, { value }) => {
setSelectedValue(value);
console.log("Valor seleccionado:", value);
};
return (
<Dropdown
placeholder='Elige tu framework favorito'
selection
options={options}
onChange={handleChange}
value={selectedValue}
/>
);
};Manejo de Eventos
Puedes manejar diferentes eventos, como onFocus y onBlur, además del evento onChange que ya hemos utilizado. Por ejemplo, para manejar el enfoque y la pérdida de enfoque:
const DropdownExample = () => {
const [selectedValue, setSelectedValue] = useState('');
const handleChange = (e, { value }) => {
setSelectedValue(value);
console.log("Valor seleccionado:", value);
};
const handleFocus = () => {
console.log("Dropdown enfocado");
};
const handleBlur = () => {
console.log("Dropdown desenfocado");
};
return (
<Dropdown
placeholder='Selecciona una opción'
fluid
selection
options={options}
onChange={handleChange}
onFocus={handleFocus}
onBlur={handleBlur}
value={selectedValue}
/>
);
};Con estos pasos, has creado e implementado un dropdown utilizando Semantic UI y React. Puedes seguir personalizando y expandiendo este componente según las necesidades de tu proyecto.
Jorge García
Fullstack developer