Obtener props de un elemento HTML

ComponentProps

ComponentProps nos ayuda frente a estas preguntas:

• ¿Cómo averiguo el type de los props de un componente?
• ¿Cómo añado todos los types que aceptan elementos como div o span?

Obten los types de un elemento HTML

Cuando quieras añadir types que provengan de un elemento HTML nativo como un button puedes extraerlos con el siguiente código:

import { ComponentProps } from "react";
 
type ButtonProps = ComponentProps<"button">;

De esta manera en ButtonProps contenemos el tipo de todos los atributos html para el elemento button. Muy útil cuando queremos crear un componente basado en button que acepte todos sus atributos pero al mismo tiempo añada props adicionales.

import { ComponentProps } from "react";
 
type Props = ComponentProps<"div"> & {
  myProp: string
};
 
function MyDiv ({ myProp, ...props }: Props) {
  console.log(myProp!)
 
  return <div {...props} />
};

Obtener los props de un componente

También se puede usar ComponentProps para extraer los props de un componente sin tener que declararlos por separado.

function SubmitButton (props: { onClick: () => void }) {
  return <button onClick={props.onClick}>Submit</button>
};
 
type SubmitButtonProps = ComponentProps<typeof SubmitButton>

Esto es especialmente útil con componentes que no controlamos directamente, como los de algún paquete npm.

import { ComponentProps } from "react";
import { Button } from "some-external-library";
 
type MyButtonProps = ComponentProps<typeof Button>;

En este caso podemos obtener los props de Button de una librería incluso cuando la librería no exporta el type por separado.