<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

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
})
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,
})
}
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...