mdown
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

mdown npm

Markdown to React.

Install

$ yarn add mdown

Usage

type TMarkdownToReactConfig = {
  blockquote?: FC<TComponentBlockquote>,
  code?: FC<TComponentCode>,
  codespan?: FC<TComponentCodespan>,
  del?: FC<TComponentDel>,
  em?: FC<TComponentEm>,
  heading?: FC<TComponentHeading>,
  hr?: FC<TComponentHr>,
  image?: FC<TComponentImage>,
  link?: FC<TComponentLink>,
  list?: FC<TComponentList>,
  listItem?: FC<TComponentListItem>,
  paragraph?: FC<TComponentParagraph>,
  strong?: FC<TComponentStrong>,
  table?: FC<TComponentTable>,
  tableCell?: FC<TComponentTableCell>,
  tableHeaderCell?: FC<TComponentTableHeaderCell>,
  tableRow?: FC<TComponentTableRow>,
  text?: FC<TComponentText>
}
 
const markdownToReact: (makrdown: string, config: TMarkdownToReactConfig) => ReactNode
import React, { Fragment } from 'react'
import { renderToStaticMarkup } from 'react-dom/server'
import { markdownToReact } from 'mdown'
 
const markdown = '_**em**_'
const config = {
  paragraph: ({ children }) => (
    <p>{ children }</p>
  ),
  text: ({ children }) => (
    <span>{ children }</span>
  ),
  em: ({ children }) => (
    <em>{ children }</em>
  ),
  strong: ({ children }) => (
    <strong>{ children }</strong>
  ),
}
const html = renderToStaticMarkup(
  <Fragment>
    { markdownToReact(markdown, config) }
  </Fragment>
)
 
console.log(html)
// <p><em><strong><span>em</span></strong></em></p>

Readme

Keywords

Package Sidebar

Install

npm i mdown

Weekly Downloads

0

Version

0.1.2

License

MIT

Unpacked Size

61.2 kB

Total Files

16

Last publish

Collaborators

  • fosimus
  • psxcode
  • deepsweet