Loading

Creando un componente de Tabs en React.js con React Hooks, React Context API y Styled components

hace 9 meses

Por: Yadurani López

Categoría: Desarrollo

Tiempo estimado: 6min

Image designed by Freepik

Creando un componente de Tabs en React.js con React Hooks, React Context API y Styled components

 

¡Comencemos! 🚀

 

Comenzaremos creando una aplicación con create-react-app para esto vamos a nuestra terminal de nuestra preferencia y ejecutamos el comando

 

 

Además, agregaremos la librería de Styled components, ejecutando en nuestra terminal npm i styled-components.

 

1.    Luego de configurar nuestro proyecto, crearemos una carpeta nueva dentro de la carpeta src en mi caso la llamaré Tab.

 

2.    Dentro de la carpeta Tab crearemos nuestro primer archivo al que nombraré TabContext.js este archivo administrará el estado de nuestras tabs.

 

3.    Dentro de este archivo crearemos una constante que dejaremos exportable y ha esta le asignaremos el hook de createContext(), de esta manera estamos creado el contexto para nuestras tabs

 

4.    Adicionalmente en este archivo crearemos un componente que envolverán nuestras tabs y este tendrá el estado inicial que iremos actualizando a medida que cambiemos de tabs, además este estado podrá ser consultado por los componentes hijos por medio de otro hook llamado useContext(). Veamos cómo quedaría nuestro archivo TabContext.js:

 

 

Nota: Luego de haber creado nuestro contexto continuaremos creando nuestro componente TabHeader, donde estarán las tabs que serán las que cambien el contenido a mostrar.

 

5.    Creamos un nuevo archivo en la carpeta Tab que llamaremos TabHeader.js, aquí crearemos un componente que usará el estado del contexto anteriormente creado este será usado para indicar al usuario si la tab está activa, además podremos asignarle un evento a nuestro ítem, para cambiar el estado.

 

Seguido crearemos un componente css con Styled components que recibirá una prop isActive que usaremos para hacer el cambio visual de la tab que está activa.

 

Emplearemos el hook useContext() para consultar el estado actual de nuestro contexto y compararlo con nuestra prop title recibida en el componente y de esta manera poder realizar la condición para indicarle al usuario si está activa o no nuestra tab.

 

También recibiremos la prop children en este componente, que usaremos para mostrar el título de cada tab. Veamos cómo quedaría nuestro archivo TabHeader.js:

 

 

 

6.    Continuamos creando un archivo dentro de la carpeta Tab que llamaremos js , este componente contendrá la información de cada una de nuestras tabs, este recibirá dos props importantes una es children, que será la descripción de cada una de nuestras Tabs y la otra prop es whenActive, que nos indicará en que momento debe mostrarse esta información, usando el hook useContext() accederemos a nuestro estado y realizaremos un condicional para mostrar o no la descripción de nuestro panel, por medio de nuestra prop children.

 

 

7.    Cuando ya hemos creado todos nuestros componentes para construir nuestras Tabs, crearemos un archivo que llamaré js donde estarán todos nuestros componentes anteriormente creados y veremos el funcionamiento nuestras tabs.

 

8.    Comenzaremos llamando nuestro componente llamado TabContainer que está en nuestro archivo js este componente contiene el estado necesario para nuestros otros componentes hijos, dentro del componente TabContainer agregaremos el componente TabHeader, en este caso se recorre un bucle(map) con un array anteriormente creado que tiene la información de cada una de las Tabs, a este componente se le debe asignar una prop llamada title y aquí pasaremos el valor title de nuestro bucle(map) y como hijo le pasaremos el contenido que deseamos que se muestre en este caso el título de nuestras tabs.

 

9.    Para nuestro componente TabPanel realizaremos la misma secuencia que con nuestro componente TabHeader sin embargo en este componente no se asignará la prop title si no una prop llamada whenActive aquí pasaremos el valor del title del bucle y de igual forma le pasamos como hijo el contenido que queremos que se visualice.

 

 

10.    Para terminar, agregaremos componentes de estilos creados con Styled components y estilizaremos nuestras Tabs.

 

¡Felicitaciones! Haz logrado terminar tu componentes de Tabs, si quieres ver un demo y el código de este tutorial haz clic aquí.

Sobre el autor...

@yadulopez

💙 Desarrolladora Front-End especializada en React JS. Creación, prototipado y desarrollo de productos digitales innovadores centrados en el usuario. Apasionada por el diseño y el emprendimiento.

Sígueme en redes sociales

Mis últimas entradas

Suscríbete al Newsletter de la comunidad de bloggers

Muy pronto...

Copyright Paul-Teran.com © 2022. Todos los derechos reservados.

Construido con el por Paúl Terán