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