@ipikuka/react-markdown NPM

@ipikuka/react-markdown

npm-typescript License ]github-license-url

This package is an opinionated wrapper of the react-markdown package that written by wooorm.

When should I use this?

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)

Installation

This package is suitable for ESM module only. In Node.js (16.0+), install with npm:

npm install @ipikuka/react-markdown

yarn add @ipikuka/react-markdown

Usage

This 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)

Options

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.

Examples:

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)

Types

This package is fully typed with TypeScript. The <ReactMarkdown /> component of the @ipikuka/react-markdown accepts OpinionatedReactMarkdownOptions.