Skip to content
This repository has been archived by the owner on Aug 29, 2020. It is now read-only.

Allows users to supply default props to components #13

Open
NickyMeuleman opened this issue Feb 16, 2020 · 3 comments
Open

Allows users to supply default props to components #13

NickyMeuleman opened this issue Feb 16, 2020 · 3 comments

Comments

@NickyMeuleman
Copy link

NickyMeuleman commented Feb 16, 2020

It would be neat if users of the plugin could provide their own default props to be used in the components this plugin supplies.

Proof of concept here: https://github.com/NickyMeuleman/gatsby-mdx-embed/tree/default-props

Eg. I want tweets to be dark mode, but don't want to add theme="dark" to every tweet I add.
Instead I provide some default props via my gatsby-config

module.exports = {
  plugins: [
    {
      resolve: "@pauliescanlon/gatsby-mdx-embed",
      options: {
        defaultProps: { Tweet: { theme: "dark" } },
      },
    },
  ],
}

This will merge supplied props with the plugin's defaults.
So the resulting default props would be

theme: "dark"
align: "left"

since align:"left" is a default used by the theme and not overwitten in gatsby-config.

Would you be interested in this feature/me PRing my branch against this one and supplying more default props (branch currently only merges options for CodePen and Tweet)

@NickyMeuleman
Copy link
Author

NickyMeuleman commented Feb 17, 2020

converted .js files to .ts (initially used method that used gatsby-node and thus didn't support TypeScript) and made a useDefaultProps hook that uses the props passed to the component and if they aren't there, falls back to the defaults (either provided by user or the default of the plugin)

TODO: TypeScript typing things

@PaulieScanlon
Copy link
Owner

@NickyMeuleman this is a great idea, did you mention it to me before, i'm sure someone did. Yeah please create a PR and we can discuss. Nice work!

@NickyMeuleman
Copy link
Author

Yup. We talked briefly on Twitter where I floated this idea :)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants