react-marksome

react-marksome

Parses some markdown, builds a tree of segments and renders them in React.

It was designed for adding basic support for styling and links to singleline strings.

See Rationale for more info.

Quick start

import { Marksome } from 'react-marksome';

function Demo() {
  const text =
    'The *quick* *brown* **fox** jumps over the *lazy* **dog**. [Wikipedia][1]';

  const references = {
    '1':
      'https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog',
  };

  return <Marksome text={text} references={references} />;
}

renders

...

The quick brown fox jumps over the lazy dog. Wikipedia

...

For more examples, see the stories.

Rationale

The current subset of markdown that is supported is:

• **strong text**
• *emphasized text*
• [link description][reference]

By restricting ourselves to only support some markdown we're able to:

• build a light package (bundlephobia)
• that provides a flexible, readable and condensed format for singleline pieces of text

Additionally we build out a tree of segments instead of simply using string replacement mostly for future extensibility and configuratility, like being able to render segments with custom React components (WIP).

All of the above means that users don't need to worry about escaping the text since:

• it relies on regular React components instead of injecting HTML via dangerouslySetInnerHTML
• the only way to inject a link is via a separate references object.

Alternatives

If you're looking for wider markdown support:

• snarkdown for lightweight Markdown parser that returns plain HTML string
• markdown-to-jsx for a lot configurability and extensibility

Commands

This project was bootstrapped with TSDX. Check the docs for more info on the commands.

Storybook

Run inside another terminal:

npm run storybook

This loads the stories from ./stories.

Testing

Jest tests are set up to run with npm test.

Bundle analysis

Calculates the real cost of your library using size-limit with npm run size and visualize it with npm run analyze.

Credits

• devuo for providing some ideas and inspiration!