Implement ability to opt out of MDXProvider components

Related to #816

packages/react/src/context.js

@@ -11,14 +11,16 @@ export const withMDXComponents = Component => props => {
 
 export const useMDXComponents = components => {
   const contextComponents = React.useContext(MDXContext)
-  let allComponents = contextComponents
-  if (components) {
-    allComponents = isFunction(components)
-      ? components(contextComponents)
-      : {...contextComponents, ...components}
+
+  if (components === false) {
+    // User has specified not to nest context or use the MDXProvider
+    return {}
+  } else if (isFunction(components)) {
+    // Custom merge via a function prop
+    return components(contextComponents)
   }
 
-  return allComponents
+  return {...contextComponents, ...components}
 }
 
 export const MDXProvider = props => {

packages/react/test/test.js

@@ -8,10 +8,9 @@ const H1 = props => <h1 style={{color: 'tomato'}} {...props} />
 const H2 = props => <h2 style={{color: 'rebeccapurple'}} {...props} />
 const CustomH2 = props => <h2 style={{color: 'papayawhip'}} {...props} />
 const CustomDelete = props => <del style={{color: 'crimson'}} {...props} />
+const Layout = ({children}) => <div id="layout">{children}</div>
 
-it('Should allow components to be passed via context', () => {
-  const Layout = ({children}) => <div id="layout">{children}</div>
-
+it('allows components to be passed via context', () => {
   const result = renderToString(
     <MDXProvider components={{h1: H1, wrapper: Layout}}>
       <Fixture />
@@ -25,7 +24,7 @@ it('Should allow components to be passed via context', () => {
   expect(result).toMatch(/style="color:tomato"/)
 })
 
-it('Should merge components when there is nested context', () => {
+it('merges components when there is nested context', () => {
   const components = {h1: H1, h2: H2}
 
   const result = renderToString(
@@ -36,14 +35,14 @@ it('Should merge components when there is nested context', () => {
     </MDXProvider>
   )
 
-  // MDXTag picks up original component context
+  // MDX pragma picks up original component context
   expect(result).toMatch(/style="color:tomato"/)
 
-  // MDXTag picks up overridden component context
+  // MDX pragma picks up overridden component context
   expect(result).toMatch(/style="color:papayawhip"/)
 })
 
-it('Should allow removing of context components using the functional form', () => {
+it('allows removing of context components using the functional form', () => {
   const components = {h1: H1, h2: H2}
 
   const result = renderToString(
@@ -54,13 +53,28 @@ it('Should allow removing of context components using the functional form', () =
     </MDXProvider>
   )
 
-  // MDXTag does not pick up original component context
+  // MDX pragma does not pick up original component context
   expect(result).not.toMatch(/style="color:tomato"/)
 
-  // MDXTag picks up overridden component context
+  // MDX pragma picks up overridden component context
   expect(result).toMatch(/style="color:papayawhip"/)
 })
 
+it('allows removing of context components by setting false', () => {
+  const components = {h1: H1}
+
+  const result = renderToString(
+    <MDXProvider components={components}>
+      <MDXProvider components={false}>
+        <Fixture />
+      </MDXProvider>
+    </MDXProvider>
+  )
+
+  // MDX pragma does not pick up original component context
+  expect(result).not.toMatch(/style="color:tomato"/)
+})
+
 it('Should pass prop components along', () => {
   const result = renderToString(<Fixture />)