react-marksome
Advanced tools
Weekly downloads
Readme
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.
Install:
npm i react-marksome
Import and render the Marksome component:
import { Marksome } from 'react-marksome';
function Demo() {
const text =
'The *quick* *brown* **fox** jumps over the *lazy* **dog**. [Wikipedia][1]';
const references: References = {
'1':
'https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog',
};
return <Marksome text={text} references={references} />;
}
renders the following line:
The quick brown fox jumps over the lazy dog. Wikipedia
For more examples, see the stories together with related fixtures.
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> & {
text: string;
references?: References;
};
type References = Record<string, string | ReferenceRenderFunction>;
type ReferenceRenderFunction = (children: ReactNode) => ReactElement;
See Quick start.
One can actually render custom components in the place of reference links by providing a render function instead of link url:
function CustomComponentsDemo() {
const text = 'The following is an actual button: [*Howdie*][greeting-button]';
const references: References = {
'greeting-button': (children) => (
<button
onClick={() => {
alert('Hello!');
}}
>
{children}
</button>
),
};
return <Marksome text={text} references={references} />;
}
The current subset of markdown that is supported is:
Emphasis (*Emphasis*) and strong emphasis (**strong emphasis**) parcing respects the related commonmark spec section.
Influenced by the related commonmark spec section, link references can be defined in a couple of ways:
There are certain quirks in marksome that are non-spec:
references
prop or notreferences
prop (ex: case-sensitive, no space-trimming, etc)If reference links are not being matched as you desire, disable unintended matches by escaping the related opening (\[) or closing (\]) brackets.
By restricting ourselves to support only some markdown we're able to:
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.
All of the above means that users don't need to worry about escaping the text since:
The following browserslist is supported without the need of any polyfills:
caniuse-lite db date: 2nd Jan 2022
This project was bootstrapped with TSDX. Check its docs for more info on the commands.
npm run storybook
This loads the stories from ./stories
.
Jest tests are set up to run with npm test
.
Calculates the real cost of your library using size-limit with npm run size
and visualize it with npm run analyze
.
FAQs
Lightweight, flexible and readable labels in React using a subset of markdown
The npm package react-marksome receives a total of 695 weekly downloads. As such, react-marksome popularity was classified as not popular.
We found that react-marksome demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.