Noisy Pterodactyl Melodies

    @pauliescanlon/gatsby-plugin-prop-shop

    0.0.1 • Public • Published
    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

    Install

    npm i @pauliescanlon/gatsby-plugin-prop-shop

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    42.4 kB

    Total Files

    78

    Last publish

    Collaborators

    • pauliescanlon