React-markdown: v3.0.0

[rexxars]

react-markdown v3.0.0

Summary

Full rewrite based on a new parser. I'd love it if you would try it out and let me know if it works or doesn't work for you. It can be installed with npm install --save react-markdown@next. Please see list of breaking changes below.

Added

• Table support!
  
  
  
  • New types: table, tableHead, tableBody, tableRow, tableCell
  
  
• New type: delete (~~foo~~)
• New type: imageReference
• New type: linkReference
• New type: definition
• Hacky, but basic support for React-native rendering of attributeless HTML nodes (<kbd>, <sub>
  etc)

BREAKING

• Container props removed (containerTagName, containerProps), override root renderer instead
• softBreak option removed. New solution will be added at some point in the future.
• escapeHtml is now TRUE by default
• HtmlInline/HtmlBlock are now named html (use isBlock prop to check if inline or block)
• Renderer names are camelcased and in certain cases, renamed. For instance:
  
  
  
  • Emph => emphasis
  
  
  • Item => listItem
  
  
  • Code => inlineCode
  
  
  • CodeBlock => code
  
  
  • linebreak/hardbreak => break
  
  
• All renderers: literal prop is now called value* List renderer: type prop is now a boolean
  named ordered (Bullet => false, Ordered => true)
• walker prop removed. Code depending on this will have to be rewritten to use the astPlugins
  prop, which functions differently.
• allowNode has new arguments (node, index, parent) - node has different props, see renderer props
• childBefore and childAfter props removed. Use root renderer instead.
• parserOptions removed (new parser, so the old options doesn't make sense anymore)

[alecmev]

Nice! How does v3 compare to remark-react? Asking because remark, the new base library, explicitly endorses it, and I'm sure others will want to know this too.

[rexxars]

They are fairly similar. My main motivation with react-markdown is to provide a "drop-in" component. One dependency that "just works" out of the box, while (in the future) being extendable. I hope (and think) that it fits in the React ecosystem and feels familiar and easy to use.

react-markdown mainly uses the markdown parser from remark and translates to React components directly from the AST (remark-react uses HAST-nodes). One benefit of going straight from markdown AST is that you can (should?) easily create React components to render to other targets, such as React Native. In the future, I hope to be able to utilize the full power of the remark ecosystem while hopefully remaining easy to use.

Another goal is to try and keep the bundle size down as much as possible. I have a couple of ideas in mind for how to achieve smaller builds, but we'll have to wait and see if that works out.

remark-react embraces and follows the remark/hast set of tools very closely, which makes it really extendable and powerful. In my personal opinion, I find it can be a bit hard to navigate the very large set of plugins and closely related projects within the unified/remark/hast/mdast/vfile sphere.

Thankfully, both projects are free and open-source, so use whichever one works for you! :)

[alecmev]

Thanks for the breakdown! And thanks for your work on this.

[pke]

Thanks. I'll give it a try. Did you consider marked as the parser? Its very fast, understands GFM by default and also gives you an AST.

[rexxars]

I did consider marked, but it has not been updated for nearly a year with no feedback from the maintainer. There was also a bunch of issues I ran across when attempting to use it that made me look for an alternative.

[ibrahima]

Just wondering, with this version, would we be able to add arbitrary remark plugins by using the astPlugins property, or is that not what that's for? Eg. I'd like to be able to add math rendering via https://github.com/rokt33r/remark-math, would that work?

Thanks!

[rexxars]

@ibrahima At some point. Not at the moment,unfortunately.

[rexxars]

Just released v3.