miguel-silva

react-marksome

  "repository": "github:miguel-silva/react-marksome",

  "description": "Lightweight, flexible and readable labels in React using a subset of markdown",

    "build": "CHECK_POLYFILLS=true tsdx build",

    "lint": "tsdx lint src test stories",

    "storybook": "start-storybook -p 6006",

      "pre-commit": "npm run lint && npm run test"

  "browserslist": ">0.25% or last 2 major versions and supports es6-module",

  "module": "dist/react-marksome.esm.js",

      "path": "dist/react-marksome.cjs.production.min.js",

      "path": "dist/react-marksome.esm.js",

    "@size-limit/preset-small-lib": "^4.9.1",

    "@storybook/addon-essentials": "^6.1.15",

    "babel-plugin-polyfill-corejs3": "^0.1.0",

[![npm](https://img.shields.io/npm/v/react-marksome)](https://www.npmjs.com/package/react-marksome) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-marksome)](https://bundlephobia.com/result?p=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](#rationale) for more info.

Import and render the Marksome component:

import { Marksome } from 'react-marksome';

    'The *quick* *brown* **fox** jumps over the *lazy* **dog**. [Wikipedia][1]';

      'https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog',

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

The _quick_ _brown_ **fox** jumps over the _lazy_ **dog**. [Wikipedia]("https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog")

The _quick_ _brown_ **fox** jumps over the _lazy_ **dog**. [Wikipedia](https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog)

For more examples, see the [stories](./stories/Marksome.stories.tsx) together with related [fixtures](./test/fixtures.ts).

React component that parses and renders a subset of markdown.

It expects the markdown text to be provided via a `text` prop, which then is combined with reference links (`[label][reference]`)defined under the `references` prop.

type MarksomeProps = HTMLAttributes<HTMLSpanElement> & {

type References = Record<string, string | ReferenceRenderFunction>;

type ReferenceRenderFunction = (key: Key, children: ReactNode) => ReactNode;

One can actually render custom components in the place of reference links by providing a render function instead of link url:

  const text = 'The following is an actual button: [*Howdie*][greeting-button]';

    'greeting-button': (key, children) => (

The current subset of markdown that is supported is:

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

- build a light package ([bundlephobia](https://bundlephobia.com/result?p=react-marksome))

- 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 extensibility and configuratility, like being able to render segments with [custom React components](#custom-components).

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](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)

- the only way to inject a link is via a separate references object.

The following [browserslist](https://github.com/browserslist/browserslist) is supported without the need of any polyfills:

  <summary>>0.25% or last 2 major versions and supports es6-module</summary>

  <p><strong>caniuse-lite db date: 15/02/2020</strong></p>

		{
		"version": "0.2.1",
		"version": "0.2.2",
		"license": "MIT",
		@@ -4,0 +4,0 @@ "repository": "github:miguel-silva/react-marksome",

		@@ -16,3 +16,3 @@ # react-marksome
		```sh
		npm i react-markdown
		npm i react-marksome
		```
		@@ -40,3 +40,3 @@

		The _quick_ _brown_ fox jumps over the _lazy_ dog. [Wikipedia]("https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog")
		The _quick_ _brown_ fox jumps over the _lazy_ dog. [Wikipedia](https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog)

		@@ -43,0 +43,0 @@ For more examples, see the [stories](./stories/Marksome.stories.tsx) together with related [fixtures](./test/fixtures.ts).

Worsened metrics