41

I have a requirement to create the doc file of each of the component we define in our reactjs application. I am looking for the npm that we can use for creating the document of any extension, so that it may extract the code, comment everything from my component and change that to the document of any extension. How can I do that, please, assist me? My question is different from the other question found regarding the jsdoc, because I am looking for the documentation in reactjs using jsdoc.

tcb
  • 2,745
  • 21
  • 20
Gorakh Nath
  • 9,140
  • 15
  • 46
  • 68
  • 1
    Curious about the intention here: is your goal to have useful documentation or is your goal achieved when the components are officially documented? – Bernard Vander Beken Jan 25 '17 at 09:19
  • Are you asking for this? https://www.npmjs.com/package/jsdoc Requesting for libraries or tools is offtopic in SO – Pablo Lozano Jan 25 '17 at 09:21
  • Possible duplicate of [How generate HTML for JSDoc](http://stackoverflow.com/questions/35182918/how-generate-html-for-jsdoc) – Pablo Lozano Jan 25 '17 at 09:22
  • I want to export all the code including comment as a document which can be in any format as per the client requirement. – Gorakh Nath Jan 25 '17 at 09:28
  • @Pablo this package is not working and also not flexible, there is no any proper documentation for it, If you know can you elaborate it how can I use this in reactjs. – Gorakh Nath Jan 25 '17 at 09:55
  • http://www.fusioncharts.com/blog/2013/12/jsdoc-vs-yuidoc-vs-doxx-vs-docco-choosing-a-javascript-documentation-generator/ I thnk this link can help. – Gorakh Nath Jan 25 '17 at 11:14
  • Related [How to properly document a React/Redux application?](https://stackoverflow.com/q/44263430/104380) – vsync May 25 '21 at 09:29

6 Answers6

28

Finally, I found a tool that solves this problem: JSDoc.app

JSDoc 3 is an API documentation generator for JavaScript, similar to Javadoc or phpDocumentor. You add documentation comments directly to your source code, right alongside the code itself. The JSDoc tool will scan your source code and generate an HTML documentation website for you.

After reading their setup instructions, I was able to do the following steps:-

  • Open your command prompt
  • Install the JSDoc globally by command: npm install jsdoc -g
  • Now go to your project folder's path and run the command: jsdoc src -r -d docs

This created the HTML documentation in the out/ folder of the project directory.

Patrick M
  • 10,547
  • 9
  • 68
  • 101
Gorakh Nath
  • 9,140
  • 15
  • 46
  • 68
  • 26
    It's a good idea to avoid installing stuff globally. Instead you can use `npm install jsdoc --save-dev` to only install it in your project. Then add a npm script for creating the doc. For example `"createdoc": "jsdoc src -r -d docs"` that you then can run with `npm run createdoc`. – Oskar Feb 14 '17 at 07:29
  • 2
    Hi, I am interested in how do u document react component with JSDoc properly? – Jennie Ji Aug 08 '18 at 07:19
  • 1
    Your link is broken, and this answer makes no sense without it. – Dave Kennewell Oct 13 '22 at 06:33
14

We document our React components library by using React Styleguidist.

It will parse your code with the following features:

  • generate API / props docs from the PropTypes you define.
  • Create live editable examples documentation that lets people copy paste easily snippet.
  • It is pretty well configurable and has hot reload to achieve internal docs.

It works by building a web app through Webpack, that you can use locally or host somewhere for all your developers.

For us, it works pretty well and they improve it over time.

Edit: Is uses react-docgen under the hood.

Artem Sapegin
  • 3,096
  • 2
  • 16
  • 20
Kev
  • 5,049
  • 5
  • 32
  • 53
6

Try this package it has examples for you to understand.

It provides a default implementation for React components defined via React.createClass, ES2015 class definitions or functions (stateless components). These component definitions must follow certain guidelines in order to be analyzable (see below for more info).

https://www.npmjs.com/package/@rtsao/react-docgen

Sagar Shetty
  • 159
  • 7
1

There is a theme to JSDoc called better-docs and it has a @component plugin. When you add it to your component (as any other tags) it will parse all your propTypes and generate documentation. Furthermore when you use it in companion with @example tag - better-docs will print a live preview.

wojtekk
  • 606
  • 7
  • 7
0

We have a lot of react component libs and use react-showroom

enter image description here

It allows to write documentation in markdown and have sandbox. A big advantage of this - you can start new project in two minutes with already configured webpack, babel, lint, etc.

Very recommend to try.

visortelle
  • 1,013
  • 1
  • 10
  • 15
0

I've written a small wrapper for the react-docgen which makes it a bit simpler to work that. It exports a markdown file for all the components in the passed folder.

Checkout the project https://github.com/LaustAxelsen/wilster-doc

Laust Axelsen
  • 1