How to pass location prop to MDXGlobalComponents?

[iammatthias]

Hi everyone, I've been puzzling over this for a couple of days now.

Based on the docs (https://www.gatsbyjs.com/docs/location-data-from-props) I am calling location in my index.js file.

/** @jsx jsx */
import { jsx } from 'theme-ui';
import * as React from 'react'; //eslint-disable-line
import { graphql } from 'gatsby';

import Layout from '../components/Layout';

import { MDXRenderer } from 'gatsby-plugin-mdx';

// markup
const Page = ({ data, location }) => {
  const content = data.contentfulPage;
  const wrappedLayout = content.wrappedLayout;

  return (
    <Layout wrapped={wrappedLayout} location={location}>
      <MDXRenderer>{content.body.childMdx.body}</MDXRenderer>
    </Layout>
  );
};

export const query = graphql`
  query {
    contentfulPage(title: { eq: "Home" }) {
      id
      title
      slug
      wrappedLayout
      body {
        childMdx {
          body
        }
      }
    }
  }
`;

export default Page;

That is being passed to my layout component.

import React from 'react';
import { ThemeProvider, useColorMode } from 'theme-ui';

import theme from './../gatsby-plugin-theme-ui';

// components
import Wrapper from './wrapper';
import { MDXGlobalComponents } from './joy/mdx';

export default function Layout({ children, wrapped, location }) {
  const [colorMode, setColorMode] = useColorMode();

  return (
    <ThemeProvider
      theme={theme}
      components={MDXGlobalComponents}
      location={location}
    >
      <button
        onClick={(e) => {
          setColorMode(colorMode === 'light' ? 'dark' : 'light');
        }}
      >
        Toggle {colorMode === 'default' ? 'Dark' : 'Light'}
      </button>
      <Wrapper wrapped={wrapped} location={location}>
        {children}
      </Wrapper>
    </ThemeProvider>
  );
}

My goal is to pass is down to a component that lists different pages based on category. Only problem is, location returns undefined when called from the component.

/** @jsx jsx */

import React from 'react'; //eslint-disable-line
import { jsx, Box } from 'theme-ui';
import { Link } from 'gatsby';

import { useSiteMetadata } from '../../hooks/use-site-metadata';

export default function List({ type, location }) {
  const { allContentfulPage } = useSiteMetadata();

  const listPages = allContentfulPage.edges;

  console.log(location);

  return (
    <>
      {listPages.map(
        (listPage) =>
          listPage.node.pageType === type && (
            <Link
              key={listPage.node.id}
              to={
                listPage.node.pageType === 'Gallery'
                  ? '/' + listPage.node.slug
                  : listPage.node.pageType === 'Blog'
                  ? '/' + listPage.node.slug
                  : '/' + listPage.node.slug
              }
            >
              <Box
                sx={{
                  paddingBottom: '2rem',
                  borderBottom: '1px solid',
                  borderColor: 'inherit',
                }}
              >
                {listPage.node.title}
              </Box>
            </Link>
          )
      )}
    </>
  );
}

How can I get location to pass through MDXRenderer or ThemeProvider in order to be accessed in a component that is called via MDX?

[iammatthias]

tbd if this works in build, but for now I'm parsing it out of import { globalHistory } from '@reach/router';

[greypants]

Thanks for pointing us in that direction @iammatthias. That lead me to the useLocation() hook from @reach/router:

import { useLocation } from '@reach/router';

export const MyComponentInAnMDXPage = (props) => {
  const location = useLocation();

  return <div>Current path: location.pathname</div>;
}