<MarkdownPage> Component

This component is intended to take in a local markdown file and render it as a single page. It ships with a server file that exposes a getStaticProps generator.

Share
Code Editor
<MarkdownPage
// pass in the results of executing the 'generateStaticProps' function from '@hashicorp/react-markdown-page/server'
staticProps={staticPropsResult}
/>

Props

NameDescription
components
object
An object in which the key is the name of a react component, and the value is the actual component. Identical objects should be passed to generateStaticProps and <MarkdownPage /> if used.
staticProps*
object
the return value from the generateStaticProps function from @hashicorp/react-markdown-page/server. See docs for details.

Usage with getStaticProps

The code sample above shows the component as rendered - this one shows how it would be used in conjuction with generateStaticProps:

import MarkdownPage from '@hashicorp/react-markdown-page'
import generateStaticProps from '@hashicorp/react-markdown-page/server'
 
export default function MyPage(staticProps) {
  return <MarkdownPage {...staticProps} />
}
 
export const getStaticProps = generateStaticProps({
  pagePath: 'content/test-page.mdx', // resolved from project root
})

Usage with Custom Components

If you would like to use markdown components within the page, you can pass a components argument to both generateStaticProps and <MarkdownPage />, as such:

import MarkdownPage from '@hashicorp/react-markdown-page'
import generateStaticProps from '@hashicorp/react-markdown-page/server'
import TestComponent from './test-component'
 
const components = { TestComponent }
 
export default function MyPage(staticProps) {
  return <MarkdownPage {...staticProps} components={components} />
}
 
export const getStaticProps = generateStaticProps({
  pagePath: 'content/test-page.mdx', // resolved from project root
  components,
})
}

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...