This package is an opinionated wrapper of the react-markdown package that written by wooorm.
The @ipikuka/react-markdown provides the <ReactMarkdown /> component which is an opinionated wrapper of the <ReactMarkdown /> component of the react-markdown, which is a React component to render markdown.
The remark plugins used in the @ipikuka/react-markdown are:
- remark-definition-list
- remark-emoji
- remark-fix-guillemets
- remark-flexible-code-titles
- remark-flexible-containers
- remark-flexible-markers
- remark-flexible-paragraphs
- remark-gemoji
- remark-gfm
- remark-ins
- remark-smartypants
- remark-supersub
- remark-textr-sync (custom)
- remark-textr-plugins (custom)
The rehype plugins used in the @ipikuka/react-markdown are:
- rehype-autolink-headings
- rehype-prism-plus
- rehype-slug
- rehype-raw
- rehype-pre-language (custom)
This package is suitable for ESM module only. In Node.js (16.0+), install with npm:
npm install @ipikuka/react-markdownor
yarn add @ipikuka/react-markdownThis package is peer dependant with react, @types/react. So, it is assumed that you have already installed them in your project.
import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from '@ipikuka/react-markdown'
ReactDom.render(<ReactMarkdown># Hello, *world*!</ReactMarkdown>, document.body)The @ipikuka/react-markdown component accepts the OpinionatedReactMarkdownOptions which is similar to ReactMarkdownOptions of the react-markdown, but a little bit opinionated.
All options are optional.
type OpinionatedReactMarkdownOptions = {
children?: string; // default: ''
className?: string; // default: undefined
components?: Record<string, Component>; // default: {}
skipHtml?: boolean; // default: false
};See the detailed explanation of the options from the link https://github.com/remarkjs/react-markdown#props
All the other options of the react-markdown are opinionated, so you can not set the rest of the options like remarkPlugins or rehypePlugins. This is why the @ipikuka/react-markdown is opinionated, providing some pre-selected plugins.
The omitted options from the official react-markdown are represented below (See https://github.com/remarkjs/react-markdown#props).
{
remarkPlugins?: PluggableList | undefined;
rehypePlugins?: PluggableList | undefined;
remarkRehypeOptions?: Options | undefined;
allowedElements?: string[] | undefined;
disallowedElements?: string[] | undefined;
allowElement?: AllowElement | undefined;
unwrapDisallowed?: boolean | undefined;
sourcePos?: boolean | undefined;
rawSourcePos?: boolean | undefined;
includeElementIndex?: boolean | undefined;
transformLinkUri?: false | TransformLink | null | undefined;
transformImageUri?: TransformImage | undefined;
}If you think that an omitted option is needed, you are wellcome to open an issue.
All the examples given in the link https://github.com/remarkjs/react-markdown#examples are valid, but YOU DON'T NEED TO PROVIDE ANY PLUGIN since the @ipikuka/react-markdown provides some pre-selected plugins by default for you.
Needs a playground with single page web application. (PR is wellcome)
This package is fully typed with TypeScript. The <ReactMarkdown /> component of the @ipikuka/react-markdown accepts OpinionatedReactMarkdownOptions.
It is a React@^18 compatible package.
MIT © ipikuka