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
Name
Description
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,})}