CODEWITHSUNDEEP
reactjstypescripttypedoctsdoc
Andrew
Andrew

Reputation: 5200

What is the proper format for typing React props in TSDoc?

I'm trying to apply the TSDoc standard for comments to a React project written in Typescript (with an eye towards generating documentation with Typedoc), but can't find any definitive answers for the preferred way to annotate a React props object. I've got this so far, where MyProps is an interface:

/**
 * Description of my function component
 * @param props - React props
 */
export default function MyComponent(props: MyProps) { ...

Is there a preferred method?

Upvotes: 4

Views: 4385

Answers (1)

Alex Wayne
Alex Wayne

Reputation: 187034

You want to document the props interface, and not the component itself. Which means this is the same as documenting fields of an interface.

import React from 'react'

interface FooProps {
  /** Testing 123 */
  foo: string
}

function Foo({foo}: FooProps) {
  return <>{foo}</>
}

<Foo foo="bar" />

When you hover over foo= on the last line, you should see the documentation.

enter image description here

Playground example.

Upvotes: 5

Related Questions