ReactJS writing stateless function comments
You can specify props
object before property name:
/**
* Form for user login
* @param {object} props Component props
* @param {bool} props.submitting Shows if form submitting is in progress
* @param {function} props.handleSubmit Form submit callback function
*/
export const LoginForm = ({ submitting, handleSubmit }) => (
<form onSubmit={handleSubmit(submit)}> ...(code)... </form>
));
For more info see @param wiki page in Parameters With Properties
section.
I know I am almost 3 years late to this party. Just adding for reference. One could do this:
/**
* @typedef {Object<string, any>} Props
* @property {boolean} submitting Shows if form submitting is in progress
* @property {function} handleSubmit Form submit callback function
*/
/**
* Form for user login
*
* @type {import('react').FunctionComponentElement<Props>}
*/
export const LoginForm = ({ submitting, handleSubmit }) => (
<form onSubmit={handleSubmit(submit)}> ...(code)... </form>
);
For brevity, one could also do:
/**
* Form for user login
*
* @type {import('react').FunctionComponentElement<{
submitting: boolean,
handleSubmit: function
}>}
*/
export const LoginForm = ({ submitting, handleSubmit }) => (
<form onSubmit={handleSubmit(submit)}> ...(code)... </form>
);
If Typescript is enabled in your IDE, you could avoid declaring prop-types altogether with this setup.