gatsby-plugin-theme-helpers (Experimental)

An experimental plugin to help with component shadowing discovery by annotating React components with the source file and the shadow target.

gatsby-plugin-theme-helpers

Installation

To test this plugin, install it as a local plugin.

  1. Clone this repo to a plugins directory in the website’s root directory.
site
  ├── content
  ├── plugins
  │   └── gatsby-plugin-theme-helpers <-------
  ├── gatsby-config.js
  └── gatsby-node.js
  1. Enable the plugin in gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Gatsby`,
  },
  plugins: [`gatsby-plugin-theme-helpers`],
}
  1. Run gatsby develop

Usage

Inspect your site using Devtools.

The plugin will add data-source and data-shadow attributes to your components to make it easy to figure out the source of a component and the name of the shadow file to create.

Starting a new Gatsby site? Check out https://github.com/reflexjs/reflex