gatsby-plugin-prop-shop

gatsby-plugin-prop-shop provides an holistic view of all defined PropTypes or type definitions in your Gatsby project.

Oh, and there must be at least one .js file in your project containing propTypes or one .tsx file containing an interface or type

👁️ Preview

• Live Demo

🚀 Getting started

Install

npm install @pauliescanlon/gatsby-plugin-prop-shop --save

Install peer dependencies

npm install gatsby-source-filesystem prop-types --save

If you see any errors relating to Gatsby or React check the peerDependencies versions here

Setup

// gatsby-config.js
module.exports = {
  ...
  plugins: [
    {
      resolve: `@pauliescanlon/gatsby-plugin-prop-shop`,
      options: {
        source: [`src/pages`, `src/images`, `src/components`],
      },
    },
  ]
  ...
}

gatsby-plugin-prop-shop will find all PropTypes for files named in the source array.

Options

| Option | Type | Required | Default | Description | | ------ | --------------- | -------- | ------- | -------------------------------------------------- | | source | array or string | yes | null | Where to find .js files with PropTypes | | debug | boolean | no | false | Logs to console paths to the .js named in source |

Run it!

You can now run either gatsby develop or gatsby build / serve and then navigate to the /prop-shop page

 ---------------------------------
  http://localhost:8000/prop-shop
 ---------------------------------

Psst!

If you're using gatsby-plugin-prop-shop in a theme you might need to be more explicit with where the source directories can be found eg;

// gatsby-config.js
module.exports = {
  ...
  plugins: [
    {
      resolve: `@pauliescanlon/gatsby-plugin-prop-shop`,
      options: {
        source: [`${__dirname}/src/components`],
      },
    },
  ]
  ...
}

or perhaps you need to jump out a level

// gatsby-config.js
module.exports = {
  ...
  plugins: [
    {
      resolve: `@pauliescanlon/gatsby-plugin-prop-shop`,
      options: {
        source: [path.resolve(`${process.cwd()}/../components/src`)],
      },
    },
  ]
  ...
}

If you haven't used PropTypes before here's a bit of an example.

...
import PropTypes from 'prop-types'

export const Say = ({ words }) => <div>{words}</div>

Say.propTypes = {
  /** Some words that the component must say  */
  words: PropTypes.string.isRequired
}

If you're using TypeScript your interface or type might look like this.

...
interface IProps {
  /** Some words that the component must say  */
  words: string;
}

export const Say: React.FunctionComponent<IProps> = ({ words }) => (
  <div>{words}</div>
)

If you're using gatsby-plugin-prop-shop in your project i'd love to hear from you @pauliescanlon