how to add properties intellisense in vscode

Question

I have a custom button component and This is how I'm using it in my React native project

<ButtonPressable
  text="Login"
  borderRadius="20"
  alignSelf="stretch"
  svg={RightArrowSvg}
/>;

Here, text,svg and 18 other properties are there. And currently I'm writing all the properties by referring to the cheat sheet which I wrote.

Is there any why to add intellisense to vscode so that when I press alt+enter It should show all the 18 properties The custom component have.

Answer 1

The answer is React Prototypes

Just exactly follow this step

• Add this at the top of your component file

import PropTypes from 'prop-types';

/**
@extends {React.Component<ButtonPressable.protoTypes>}
*/

• Add this after class at bottom or wherever you fell prettier but outside class ButtonPressable

ButtonPressable.protoTypes = {

  /** text to be displayed on button */
  text: PropTypes.string.isRequired,

  /** changes text color */
  color: PropTypes.string.isRequired,

}

That's it, Know you can access these props with description by pressing ctrl + space