@ipikuka/react-markdown NPM

@ipikuka/react-markdown

npm-typescript License ]github-license-url

This package is an opinionated wrapper of react-markdown.

When should I use this?

The @ipikuka/react-markdown provides the <ReactMarkdown /> which is a React component to render markdown. It is an opinionated wrapper of the react-markdown having pre-selected plugins and options.

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 (with custom plugins)

The rehype plugins used in the @ipikuka/react-markdown are:

rehype-autolink-headings
rehype-prism-plus
rehype-slug
rehype-raw
rehype-pre-language

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*! Here is a ==marked text==.</ReactMarkdown>, document.body)

Options

The @ipikuka/react-markdown accepts 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;
  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.