Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub
prop-shop-og-image image

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

🚀 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

ko-fi

© 2023 Gatsby, Inc.