gatsby-transformer-react-docgen
Parses inline component-documentation using react-docgen.
Install
npm install --save gatsby-transformer-react-docgen
Usage
Add a plugin-entry to your gatsby-config.js
module.exports = {
plugins: [`gatsby-transformer-react-docgen`],
}
For custom resolvers or handlers, all config options are passed directly to react-docgen.
In additiona any custom handlers are passed the component file Node
object as their last
argument for more Gatsby specific handler behavior.
module.exports = {
plugins: [
{
resolve: "gatsby-transformer-react-docgen",
options: {
resolver: require("./custom-resolver"),
},
},
],
}
File parsing and babel configs
By default, your local .babelrc
will be used to determine how to parse source files. Don’t worry
if you don’t have a local babel config and are using Gatsby’s default settings! If there isn’t any config react-docgen will
use it’s own, permissive parsing options.
In the case of more complex sites with local custom configs, such as in a monorepo, you may have to tell babel (via react-docgen), how to properly resolve your local babel config. See the react-docgen documentation for more details.
module.exports = {
plugins: [
{
resolve: "gatsby-transformer-react-docgen",
options: {
babelrcRoots: ["../packages/*"],
},
},
],
}
You’ll also need to include a source-plugin, such as gatsby-source-filesystem, so that the transformer has access to source data.
Note: that at least one of your React Components must have PropTypes defined.
How to query
An example graphql query to get nodes:
{
allComponentMetadata {
edges {
node {
displayName
description
props {
name
type
required
}
}
}
}
}