Docky
Generate Documentation for React Components.
Docky is a tool for generating documentation for React component libraries. It works by reading a specified README (optional) and directory of components and parsing the components and their comments, using react-docgen.
If a Readme file is specified, Docky will auto-parse the h2 (##) headers and add them to the sidebar with relative links to the page content.
Example Component
; /** * Some general description of your component */ <main className=className> children </main> ApppropTypes = /** * Description of prop type */ children: PropTypesanyisRequired /** * Description of prop type */ className: PropTypesstringisRequired;
CLI Usage
Install docky globally:
npm install -g docky
Run docky on a single file or entire folder:
docky src/components/**/*.js
Example Usage with Options
docky src/components/**/*.js \ # specify the components to parse --watch "src/components/**/*.js","./README.md" \ # watch files --ignore "src/components/**/index.js" \ # ignored files --use-readme=false
Tip: to avoid retyping the command every time, add it to an NPM script in in your package.json
Options
Usage: docky [files] [options] Options: -h, --help output usage information-V, --version output the version number-c, --color <HEX> Change the primary theme color -w, --watch "<files>" Watch specific files and compile on change -i, --ignore "<files>" Ignore specified files from docs--use-readme [bool] include/omit README from your documentation
Contributing
Docky uses Pug (formally known as Jade) and SASS for template generation. The files can be found under the template
directory.
There is a components
directory which contains some example React components for testing. You can run docky over the local folder by running:
npm run docs
To compile the sass, run:
npm run sass
Live Reload Compilation
To auto-compile the docs on change, use the npm start
command which will start BrowserSync (for live reloading), SASS --watch (for regenerating csss) and Docky --watch (for re-compilation).
Thanks
This tool relies heavily on the react-docgen project by the reactjs team so many thanks to those who have made Docky possible.