¿Sabes qué es focus-within en React? React es una librería muy popular en el mundo de la programación, reconocida por mezclar la sintaxis de JavaScript con la de HTML para simplificar la creación de SPA (single-page application). Por ello, hay muchos elementos de ambas sintaxis que podemos utilizar en React para desarrollar y diseñar nuestros proyectos. Lo mismo sucede con CSS, un lenguaje al que podemos acceder desde React.
En este post, te enseñaremos qué es y cómo funciona el focus-within en React, una pseudoclase de CSS fundamental para estilizar tus aplicaciones.
¿Qué es focus-within en React?
Focus-within es una pseudoclase que proviene del lenguaje de programación CSS. Como puedes leer en nuestro post sobre pseudoclases y pseudoelementos en CSS, una pseudoclase es una palabra clave que podemos añadir a nuestros elementos para identificar un estado dentro de ellos. Para reconocer una pseudoclase basta con ver una palabra clave con dos puntos detrás de ella (:pseudoclase).
Las pseudoclases más populares en CSS son :hover, que define un elemento cuando tiene el ratón encima, y :visited, que define un elemento enlace que ha sido visitado. Como has leído en nuestro post sobre cargar CSS desde un componente React, puedes acceder a CSS puro en un proyecto y luego importarlo a React. Por ello, podemos usar este tipo de pseudoclases en nuestro código.
Focus-within en React nos permite llamar a un componente de esta librería y definir su estilo cuando tiene el foco encima. Puede que esto te suene muy similar a la pseudoclase :focus, que nos permite estilizar un elemento con el foco encima. La diferencia es que con :focus-within en React podemos acceder al padre del elemento que tiene el foco. Es decir, podemos estilizar el contenedor del elemento que tiene el foco, no solo el elemento.
Para conocer más sobre focus-within en React, te invitamos a leer sobre su funcionamiento general en el post sobre focus-within en la página oficial de la MDN.
¿Cómo funciona el focus-within en React?
La pseudoclase focus-within en React funciona de igual manera que en otras herramientas de programación. Es decir, la usamos cuando queremos estilizar un elemento o componente en un estado específico. Entonces, supongamos que tenemos las líneas de código que hemos escrito en nuestro post sobre crear un sustituto de input en React:
import classNames from ‘classnames’;
import ‘./FormField.css’
function FormField ({className, label, …props}) {
return (
<div className={classNames (‘formField’, className)}>
<label className= «formField-label»>
<span> {label} </span>
<input
className=»formField-input»
autoComplete=«off»
{…props}
></input>
</label>
</div>
);
}
export default FormField;
Allí, hemos creado el componente focus-within, que contiene un elemento label con un input dentro. Este elemento label funciona para insertar la etiqueta dentro de un input de tipo text que le dice al usuario qué datos necesitamos que escriba. En este orden de ideas, el elemento label es padre del input. Sin embargo, el elemento input es el que estará seleccionado por el usuario. Por ello, si queremos cambiar el estilo de este label, deberemos usar la pseudoclase focus-within en React.
A continuación, puedes ver cómo usamos esta pseudoclase para llamar al componente formField cuando está seleccionado. Además, en esta llamada usamos el nombre de la clase (className) que le hemos otorgado al label para que solo estilicemos esta sección del componente.
.formField :focus-within .formField-label {
color: rgb (29, 161, 242);
border-color: rgb (29, 161, 242);
}
¿Qué sigue?
Ahora que sabes qué es y cómo funciona la propiedad focus-within en React, ¡puedes usar todo tipo de propiedades CSS para estilizar tus propias aplicaciones! Sin embargo, el mundo del desarrollo web es muy amplio y todavía queda mucho por aprender. Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, en donde te formarás de manera teórica y práctica para ser un experto del desarrollo web en pocos meses. ¡No te lo pierdas y apúntate para cambiar tu vida!
