Skip to content

react-docgen integration plugin, renders React components information into SourceJS Spec page.

License

Notifications You must be signed in to change notification settings

sourcejs/sourcejs-react-docgen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SourceJS Auto React Doc Builder Middleware

react-docgen integration plugin, renders React components information into SourceJS Spec page.

Compatible with SourceJS 0.6.0+.

Install

To install middleware, run npm command in sourcejs/user folder:

npm install sourcejs-react-docgen --save

After restarting your app, middleware will be loaded automatically. To disable it, remove npm module and restart the app.

Usage

After installing the middleware, during SourceJS Spec load plugin will try to find first <specPath>/*.jsx file, analyze it and expose raw and rendered into HTML data objects. Data will be then available within EJS Spec pre-rendering.

Insert these code snippets anywhere you want in your Spec file:

<h1>My Spec</h1>

<section class="source_section">
    <h2>Default Example</h2>

    <p><%- info.__docGenRaw.description %></p>

    <%- info.__docGenHTML %>

    <div class="source_example"></div>
</section>
# My Spec

## Default Example

<%- info.__docGenRaw.description %>

<%- info.__docGenHTML %>

```example
code
```

Other custom Spec file syntax options like sourcejs-react and sourcejs-md-react plugins are also supported.

Check usage examples in sourcejs-react-bundle-example and react-styleguide-example.

EJS exposed data

  • info.__docGenRaw - raw JSON from react-docgen
  • info.__docGenHTML - rendered table with properties

Configuration

Using Spec's info.json file, it's possible to define custom path to React component:

{
  "title": "React Spec",
  "main": "custom-relative-path/index.jsx"
}

Or overriding global plugin configuration:

module.exports = {
	plugins: {
		reactDocgen: {
			componentPath: 'custom/path/index.jsx',
		}
	}
};

See other configuration options below.

enabled

Default: true Type: boolean

Set false to disable middleware.

componentPath

Default: '*.jsx' Type: string

Define custom path to component entry file. Accepts glob string, which will be resolved relatively to spec path (takes only first found file).

TODO:

  • Add auto-append option

Pull request highly welcome!

Other SourceJS Middlewares

To create own SourceJS Middleware, we recommend using the official generator - https://github.com/sourcejs/generator-sourcejs.

About

react-docgen integration plugin, renders React components information into SourceJS Spec page.

Resources

License

Stars

Watchers

Forks

Packages

No packages published