typedoc-plugin-mark-react-functional-components

A plugin for TypeDoc to mark React functional components differently than ordinary functions.

See demo (built from this module ) or its screenshot:

Overview

Currently it is a simple head.end hook, adding:

• one script
  • defines window load event
  • find functions, whose return type is given reactReturnType option
  • get its "title" name
  • according to this name, get all relevant "title" elements
  • add class react-functional-component to these relevant elements
  • find functions whose name matches /^use[A-Z]/ regexp and add class react-hook to these elements
• one style
  • adjust .react-functional-component::before to display react icon
  • adjust .react-hook::before to display react hook icon

Installation

npm install --save-dev typedoc-plugin-mark-react-functional-components

Usage

Plugin should be automaticall detected by TypeDoc. If not, see TypeDoc plugin option.

Options:

• reactReturnType (string | string[])

  Return type of react functional components.

  Typically Element, JSX.Element or similar.

• notReactHook (string | string[], optional)

  By default, mark all functions mathing /^use[A-Z]/ as react hooks. This option define names, which should be excluded.

• markReactHooks (boolean, optional, default true)

  Mark react hooks or not.

Compatibility

tested with TypeDoc 0.22.15 and its default template.

Testing

• npm run build
• npm run test
• view public/index.html

Contributing

is welcome :-)

• via the GitLab pages of the project

Bugs

issue tracker

Maintainer

Jan Stránský

License

MIT

TODO

• customization?
• different approach (e.g. full theme, more internal plugin, ...)?
• other occurrences (e.g. class method returning component)?
• ... ?