Skip to content
This repository has been archived by the owner on Nov 22, 2021. It is now read-only.

PaulieScanlon/gatsby-plugin-prop-shop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

58 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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

About

A Gatsby plugin that provides an holistic view of all defined PropTypes ๐Ÿš

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published