Is adding comments/hints to a interface on a styled component possible and if so, how?

Question

I have an interface on my styled component which contains the type hints for each attribute. As shown below:

interface PBProps {
    color: Colours;
    bgColor: Colours;
    /** for example: 10px or 10% */
    height: string; 
    paddingLR: string;
    fontSize: string;
    width: string;
    margin: string;
    fontWeight: string;
}

The idea is so when you hover over height on the actual element. I have a the comment show.

so it shows "for example: 10px or 10%" in the same box that has (JSX attribute) height: string

Image Example

I understand you can do:

/**
 * @param {string} height // comment
 */

but this does not give the effect i wish to achieve. Is this even possible. 2 days searching has gone far enough! my google FU is not strong enough!

score 0 · Answer 1 · answered Apr 07 '22 at 19:04

I know this is an old question but just in case anyone else runs into this here's what I found...

I think the short-answer to your question is "no". The styled-components documentation does mention syntax highlighting but there's no recommendation for how one documents a styled component as far as I can tell. With syntax highlighting, you can see that inline comments (// ... or /* ... */) are supported but it doesn't look like any editor/extension parses them into the per-prop hints you're hoping for.

The normal JSDoc / TSDoc syntax (above the styled component) you mentioned at least (in VS Code) gets some documentation to be shown when hovering over the component itself but not over each prop. This answer claims to do it but I couldn't get that working in VS Code. You may want to reach out to the JSDoc and TSDoc communities or check out packages like this one that do react-specific documentation.

Is adding comments/hints to a interface on a styled component possible and if so, how?

1 Answers1