Props Getters en React: Aprende a aplicar personalización y control de componentes 2024

El Props Getters pattern en React es una técnica avanzada que nos permite abstraer y distribuir propiedades a componentes hijos de una manera más eficiente y controlada.

Se utiliza comúnmente en componentes de bibliotecas para proporcionar un mayor control sobre cómo se aplican las props a los componentes hijos, sin sacrificar la personalización.

Si eres más de aprender visualmente o simplemente quieres un resumen rápido, no te pierdas este vídeo donde explico el patrón Control Props en React JS paso a paso:

¿Por qué Props Getters?

En muchas ocasiones, al crear componentes reutilizables, nos encontramos con la necesidad de combinar props que provienen del usuario con las props internas que nuestro componente necesita para funcionar correctamente. Aquí es donde el patrón de Props Getters brilla.

Ejemplo Práctico

Supongamos que estamos creando un componente de Dropdown y queremos controlar el comportamiento de un botón que abre y cierra este Dropdown. Queremos asegurarnos de que ciertas props se apliquen al botón, pero también queremos permitir personalizaciones.

function Dropdown({ children }) {
  const [isOpen, setIsOpen] = useState(false)

  const getButtonProps = ({ onClick, ...props } = {}) => ({
    onClick: (...args) => {
      setIsOpen(!isOpen)
      if (onClick) {
        onClick(...args)
      }
    },
    ...props,
  })

  return (
    <>
      <button {...getButtonProps()}>Toggle Dropdown</button>
      {isOpen && children}
    </>
  )
}

Aquí, getButtonProps es una función que combina las propiedades que queremos (en este caso, un controlador onClick) con cualquier otra prop que el consumidor quiera pasar.

Uso del Componente

<Dropdown>
  <p>Contenido del Dropdown</p>
</Dropdown>

Con este patrón, el consumidor del componente Dropdown puede personalizar el botón agregando o sobrescribiendo props:

<Dropdown>
  <button
    {...getButtonProps({
      className: 'btn-custom',
      onClick: () => console.log('Botón presionado!'),
    })}
  >
    Toggle Personalizado
  </button>
  <p>Contenido del Dropdown</p>
</Dropdown>

Conclusión

El patrón de "Props Getters" ofrece una solución elegante para mezclar props internas con las que el usuario puede pasar. Proporciona un gran equilibrio entre la reutilización de componentes y la personalización.

Si te ha gustado este análisis sobre el patrón Props Getters, te invito a explorar los otros patrones avanzados en React JS que he analizado en la guía principal.

Y recuerda, si quieres llevar tus habilidades al siguiente nivel, no te pierdas el curso completo en el Canal de YouTube de Developero.