React Marked

A simple React component that wraps the Marked markdown parsing library.

Installation

npm

npm install @jnbelo/react-marked

yarn

yarn add @jnbelo/react-marked

Usage

import React from 'react';
import MarkedViewer from 'react-marked';
import { MarkedOptions } from 'marked';

const App = () => {
    const content = '# Heading \n Lorem Ipsum [link](https://github.com)';

    const options: MarkedOptions = {
        gfm: true
    };

    const overrides = {
        renderer: {
            link(href: string | null, title: string | null, text: string): string {
                return `<a href=${href} title=${title} target="_blank">${text}</a>`;
            }
        }
    } as MarkedOptions;

    return <MarkedViewer content={content} options={options} overrides={overrides} />;
};

Note: Currently, due to the way the options typings were created, when adding overrides (See Marked's extensibility documentation, we need to use type assertion as opposed to type annotation)

Further Documentation

Check out Marked's documentation pages for further options and extensibility.

License

Copyright (c) 2020 José Belo. (MIT License)