How to properly document the Props parameter of a React Native component

user_11002564 0
Viewed 505

I am trying to write the JSDocs for an application that I am working on, but regardless of how I document a Component function, the documentation summary shows that the function accepts the parameter Prop of type "any", and will not show the proper summary of what props should contain.

For example, on one function I have this as my documentation:

/**
 * JSX Component for displaying selected images in a fullscreen Modal
 * @typedef {object} props
 * @prop {boolean} modalVis state variable boolean for controling modal visibility
 * @prop {callback} setModalVis callback to state function to set modalVis
 * @prop {string} imageUri string uri of the image to be displayed
 * @returns 
 */
const DisplayModal = (props) => {...}

But when I hover the function elsewhere in the code, it gives the following text:

const DisplayModal: (props: any) => JSX.Element

@typedef - Props

@returns

screenshot

Is there a proper way to document the expected contents of Props such that a peek of the function will provide the needed information?

react-native jsdoc
2 Answers

This is working for me well. I would write it like this.

/**
 * 
 * @param {{ 
 * type: "option1" | "option2" | "option3"
 * onClick: function
 * className: string,
 * styles: React.CSSProperties
 * }} props Props for the component
 * @returns String
 */
user_94188000

It should be like the following snippet using @param instead of @typedef and @prop:

/**
 * JSX Component for displaying selected images in a fullscreen Modal
 * @param {object} props
 * @param {boolean} props.modalVis state variable boolean for controling modal visibility
 * @param {() => void} props.setModalVis callback to state function to set modalVis
 * @param {string} props.imageUri string uri of the image to be displayed
 * @returns
 */
  const DisplayModal = (props) => {...}

Screenshot

user_28283410
Related