import Counter from "\$components/Counter";

Showcasing how MDX for Gatsby.js works ... The Counter component is imported explicitly, but since we are using MDXProvider, we can also define global components which don't need to be imported (e.g. Link, YouTube).

Showcasing how MDX for Gatsby.js works ... The Counter component is imported explicitly, but since we are using MDXProvider, we can also define global components which don't need to be imported (e.g. Link, YouTube).

Showcasing how MDX for Gatsby.js works ... The Counter component is imported explicitly, but since we are using MDXProvider, we can also define global components which don't need to be imported (e.g. Link, YouTube).

A React component in Markdown (imported component):

import React from 'react'

const Counter = initialCounter => {
  const [counter, setCounter] = React.useState(initialCounter)

  const onIncrement = () => {
    setCounter(c => c + 1)
  }

  const onIncrement = () => {
    setCounter(c => c - 1)
  }

  return (
    <div>
      {counter}
      <div>
        <button onClick={onIncrement} type="button">
          Increment
        </button>
        <button onClick={onDecrement} type="button">
          Decrement
        </button>
      </div>
    </div>
  )
}

export default Counter