Passing common prop to all components in MDX file, without adding the prop to each component

Question

I've got mdx files with components that need to be locale aware.

Lots of components. And they all need to be locale-aware.

In the .mdx files, I can change them from this:

<FirstDayOfMonth/>

to that:

<FirstDayOfMonth lang="fr"/>

But then I'd need to do it for every component in every .mdx file.

Is there a way to make a prop available to all components used in mdx?

I thought of passing it to the MDXRenderer, something like this:

<MDXProvider>
  <MDXRenderer lang={currentLang}>{body}</MDXRenderer>
</MDXProvider>

Or accessing the frontmatter from the components.

But both approaches are not documented and didn't give any results.

Better ideas?

per request, list of relevant dependencies:

  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "gatsby": "^3.6.2",
    "gatsby-plugin-copy-files-enhanced": "^1.1.1",
    "gatsby-plugin-mdx": "^2.11.0",
    "preact": "^10.5.13",
    "preact-render-to-string": "^5.1.19",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
}

I'm having this same issue and am looking for an answer too! — Brayden W, Aug 25 '21 at 18:47
In my case, yes, Gatsby (But Ferran Buireu edited those tags out ) — Félix Paradis, Aug 26 '21 at 02:48
could you please share the version of the packages you're using? react, gatsby, plugins, etc. — diedu, Aug 26 '21 at 21:50

score 4 · Answer 1 · edited Oct 19 '21 at 22:03

You could add those props when passing the shortcodes to the MDXProvider by iterating through the map and returning new components with the default props injected.

import FirstDayOfMonth from 'path/to/FirstDayOfMonth';

const addProps = (components, defaultProps) => {
  const withProps = {};

  for (const [key, Component] of Object.entries(components)) {
    withProps[key] = (props) => <Component {...defaultProps} {...props} />
  }

  return withProps;
}

const shortcodes = { FirstDayOfMonth, SomeOtherComponent };

const Layout = ({ children }) => {
  const someDefaultProps = {
    lang: "fr",
    something: "else",
  };

  const shortcodesWithProps = useMemo(
    () => addProps(shortcodes, someDefaultProps),
    someDefaultProps
  );

  return (
        ...
        <>
          <MDXProvider components={shortcodesWithProps}>
            {children}
          </MDXProvider>
        </>
       ...
  );
};

Passing common prop to all components in MDX file, without adding the prop to each component

1 Answers1

Linked