Render React components within markdown and markdown as React components!
> Render React
> components
> within markdown and markdown as React components!
* Render markdown as React components.
* Render React components within the markdown!
* Full TypeScript Support.
* Fully tested.
* Supports all Showdown extensions, like the
Twitter Extension and the
Youtube Extension.
* New in 2.0: Supports Showdown Flavors!
* New in 2.1:
* Fixes #54: Missing content after a self-closing component. This was fixed by setting the default value of showdown config recognizeSelfClosing to true. Thanks @n1ru4l
* New feature: add new optional sanitizeHtml prop for sanitizing html before it was rendered. Thanks @n1ru4l aswell.
``bash`
npm install --save react-showdown
or
`bash`
yarn add react-showdown
Example with ES6/JSX:
`jsx
import React from 'react';
import MarkdownView from 'react-showdown';
export default function App() {
const markdown =
To get started, edit the markdown in \example/src/App.tsx\.
| Column 1 | Column 2 |
|----------|----------|
| A1 | B1 |
| A2 | B2 |;
return (
options={{ tables: true, emoji: true }}
/>
);
};
`
Use a React component and use it within the markdown with ES6 / TypeScript:
`jsx
import MarkdownView from 'react-showdown';
function CustomComponent({ name }: { name: string }) {
return Hello {name}!;
}
const markdown =
;
``
* markdown, string, required
* flavor, Flavor, optional
* options, ConverterOptions, optional
* extensions, showdown extensions, optional
* components, components, optional
Converter options will be pushed forward to the showdown converter, please
checkout the valid options section.
Project is based on the markdown parser Showdown and
the html parser htmlparser2.
* reactdown
* react-markdown, based on
commonmark.js
* commonmark-react-renderer, based on
commonmark.js
[travis-image]: https://img.shields.io/travis/jerolimov/react-showdown/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/jerolimov/react-showdown
[coveralls-image]: https://img.shields.io/coveralls/jerolimov/react-showdown/master.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/jerolimov/react-showdown
[dependency-image]: http://img.shields.io/david/jerolimov/react-showdown.svg?style=flat-square
[dependency-url]: https://david-dm.org/jerolimov/react-showdown