Spread props type in React

Question

I was creating a react component for icon.

The component looks like this

import React from "react";
import MIcon from "react-native-vector-icons/MaterialIcons";
import MaterialIconCommunity from "react-native-vector-icons/MaterialCommunityIcons";
import icons from "./names";

interface Props { 
  name: string
}
const Icon = ({ name, ...props }: Props) => {
  if (icons[name] === "material-community") {
    return <MaterialIconCommunity name={name} {...props} />;
  }
  if (icons[name] === "material") {
    return <MIcon name={name} {...props} />;
  }

What should be the type of ...props here?

Answer 1

You are extending a component from a library. If that library provides types, you should be able to use them and extend with your additional props (in this case, just "name"). You should inspect the source file for MaterialIconCommunity and MIcon , but it would look something like this:

interface Props extends SomeMaterialIconPropsType { 
  name: string
}