How do you show expected values of react component props in vscode?

Question

I am trying to create my own private component library. I manage to show the description of the prop using prop-types but the expected values are not shown. I haven't seen any documentation regarding this one or I'm just blind.

This is what I'm trying to achieve just like in material-UI.

Arbour

Answer 1

PropTypes is for runtime checks it has nothing to do with VSCode auto-complete/auto-suggestions.

Getting a description of the property is a part of VSCode, it gets it from function parameters:

// Will get those props autocomplete
const Component = ({ prop1, prop2, prop3 }) => {}

// Won't get autocomplete
const Component = (props) => {}

For getting auto-suggestion you need to add types for the component or using types system like Typescript and Flow.

See types example in Material UI repo.

See related question of how it's done.

Julietjulieta

Thank you, i thought auto-suggestion might be easier. i'll try though. – Arbour

@Arbour If you wonder how its done, check #62194559 – Julietjulieta

you sir is just amazing, i remove index.d.ts and it worked. if i wanted to use index.d.ts just for organization how do i go about it? working image – Arbour

Sorry I have little knowledge about it, better ask the community – Julietjulieta

Answer 2

I really appreciate what @dennis-vesh said. However this method will give you ability to suggest options like MaterialUI does. Suppose you have a prop named as type. The types are facebook, youtube and twitter. Now you want your component should suggest it to the developer when they use your component. The method helps me most is JSDOC method.

/**
 * 
 * @param {{ 
 * type: "facebook" | "youtube" | "twitter";
 * }} props Props for the component
 * 
 */
const Component({ type }) => {....}

Incudes