React component for rendering markdown content with pre-configured yaml
frontmatter handler.
The component uses originally the react-markdown
library with the plugins remark-gfm
,
remark-frontmatter
and
remark-parse-frontmatter
.
It extends the properties of the original component and also maintains the original behaviour.
The package is available at npmjs.org registry, it can be installed using your favorite package
manager, such as npm
or yarn
. Because it is a react component, the package does not include
the react
dependency, but they are required to use the component. Make sure the react
component
is present in your project.
npm install @simplecomponent/markdown
yarn add @simplecomponent/markdown
Simple usage of the Markdown
component passing the content as the children property, based on
the original implementation:
import React from "react";
import { Markdown } from "@simplecomponent/markdown";
const App = () => {
return <Markdown># Hello World</Markdown>;
};
Using the value
property to pass the markdown content instead of the children property:
import React from "react";
import { Markdown } from "@simplecomponent/markdown";
const App = () => {
return <Markdown value={"# Hello World"} />;
};
The component also parses the yaml
frontmatter from the markdown content:
import React from "react";
import { Markdown } from "@simplecomponent/markdown";
const markdown = `---
title: Hello World
---
# Hello World
`;
const App = () => {
return <Markdown value={markdown} />;
};
To access the frontmatter data, two new optional properties are now available in the component,
the BeforeDataComponent
and AfterDataComponent
. These properties receives a component type
with the data property, they will be rendered before and after the markdown content, respectively.
import React from "react";
import { Markdown } from "@simplecomponent/markdown";
const markdown = `---
image: "https://example.com/image.jpg"
author: "John Doe"
published: "2021-01-01 00:00:00"
---
# Hello World
This is a simple example.
`;
const HeroImage = ({ data }) => {
return (
<div>
<img src={data.image} alt="Hero Image" />
</div>
);
};
const Author = ({ data }) => {
return (
<div>
<p>
Author: {data.author} - Published at {data.published}
</p>
</div>
);
};
const App = () => {
return (
<Markdown
value={markdown}
BeforeDataComponent={HeroImage}
AfterDataComponent={Author}
/>
);
};
The result of the example above will be the following HTML structure (excluding the comments):
<div>
<!-- The BeforeDataComponent -->
<div>
<img src="https://example.com/image.jpg" alt="Hero Image" />
</div>
<!-- The markdown content parsed -->
<div>
<h1>Hello World</h1>
<p>This is a simple example.</p>
</div>
<!-- The AfterDataComponent -->
<div>
<p>Author: John Doe - Published at 2021-01-01 00:00:00</p>
</div>
</div>
Read more the original react-markdown
documentation to
learn how to customize the component and its API usage.
The package is open-sourced software licensed under the MIT license.