Home > Software engineering >  i want to add explanation in my code using jsdoc
i want to add explanation in my code using jsdoc

Time:10-27

I am using jsDoc to explain about onChange function so my task is if some one want to use my component that i added in my repo i want to tell user about onChange like what parameters it accept so i am confused if i add some explanation so some other one able to understand or not

This is my component

/**
 * @type {string}
 * @param {*} onChange - onChange will accept parameter as (value: any) => void.
 * @returns 
 */

this onchange function that i need to explain mean if someone using my component that user need to pass parameter like this my component onChnage accept input like this

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };
<DatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />

CodePudding user response:

If I'm understanding correctly, you want to document the following function signature used for the onChange handler of a React component:

const handleDateChange = (date) => {
  setSelectedDate(date);
};

It appears to be a function that consumes a date argument that I'll assume is a string for this answer. The following is how I would document the function signature.

@param {(date: string) => void} onChange - date change handler.

Update

Ah, I just realized you are wanting to document the props of a React component. Define the props object first, then define props.onChange.

/**
 * DatePicker component
 * @param {Object} props - component props
 * @param {(date: string) => void} props.onChange - date change handler.
 * @returns JSX.Element
 */
export default function DatePicker({
   ...props
}) {
  ...
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker {...props} />
    </MuiPickersUtilsProvider>
  );
}
  • Related