Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
markdown-to-jsx
Advanced tools
The markdown-to-jsx package is an npm package that allows you to parse and render Markdown content as React components. It is lightweight and customizable, making it a good choice for projects that need to convert Markdown to JSX without heavy dependencies.
Basic Markdown Parsing
This feature allows you to render basic Markdown text as React components. The example code shows how to import the Markdown component from the package and use it to render a simple Markdown string.
import Markdown from 'markdown-to-jsx';
const markdownInput = '# Hello World!';
function App() {
return <Markdown>{markdownInput}</Markdown>;
}
Custom Components
This feature allows you to use custom components to render specific parts of the Markdown content. In the example, a custom anchor component is used to replace the default rendering of links.
import Markdown from 'markdown-to-jsx';
import MyCustomComponent from './MyCustomComponent';
const markdownInput = '[Click me](#custom)';
const options = {
overrides: {
a: {
component: MyCustomComponent,
props: {
className: 'my-custom-class'
}
}
}
};
function App() {
return <Markdown options={options}>{markdownInput}</Markdown>;
}
Markdown Options
This feature allows you to customize the parsing and rendering behavior of the Markdown content. The example demonstrates how to use options to modify the default behavior, such as forcing block-level rendering or customizing the slugify function.
import Markdown from 'markdown-to-jsx';
const markdownInput = 'Hello, *world*!';
const options = {
forceBlock: true,
forceInline: false,
slugify: (text) => text.toLowerCase().replace(/\s/g, '-')
};
function App() {
return <Markdown options={options}>{markdownInput}</Markdown>;
}
react-markdown is a popular Markdown renderer for React that uses remark to parse Markdown. It is similar to markdown-to-jsx but offers a more extensive plugin system, which allows for more customization and extensibility at the cost of a larger bundle size.
marked is a low-level Markdown compiler for parsing Markdown without caching or blocking for long periods of time. It is not specifically designed for React like markdown-to-jsx, but it can be used in a React project with additional setup. It is known for its speed and extensibility.
remarkable is another Markdown parser that can be configured extensively with plugins. It is not React-specific and provides a full-featured Markdown to HTML converter. Compared to markdown-to-jsx, it might require additional integration steps for use within React applications.
markdown-to-jsx
uses a fork of simple-markdown as its parsing engine and extends it in a number of ways to make your life easier. Notably, this package offers the following additional benefits:
Arbitrary HTML is supported and parsed into the appropriate JSX representation
without dangerouslySetInnerHTML
Any HTML tags rendered by the compiler and/or <Markdown>
component can be overridden to include additional
props or even a different HTML representation entirely.
GFM task list support.
Fenced code blocks with highlight.js support.
All this clocks in at around 5 kB gzipped, which is a fraction of the size of most other React markdown components.
Requires React >= 0.14.
markdown-to-jsx
exports a React component by default for easy JSX composition (since version v5):
ES6-style usage*:
import Markdown from 'markdown-to-jsx';
import React from 'react';
import {render} from 'react-dom';
const markdown = `# Hello world!`.trim();
render((
<Markdown>
# Hello world!
</Markdown>
), document.body);
/*
renders:
<h1>Hello world!</h1>
*/
* NOTE: JSX does not natively preserve newlines in multiline text. In general, writing markdown directly in JSX is discouraged and it's a better idea to keep your content in separate .md files and require them, perhaps using webpack's raw-loader.
Override a particular HTML tag's output:
import Markdown from 'markdown-to-jsx';
import React from 'react';
import {render} from 'react-dom';
// surprise, it's a div instead!
const MyParagraph = ({children, ...props}) => (<div {...props}>{children}</div>);
render((
<Markdown
options={{
overrides: {
h1: {
component: MyParagraph,
props: {
className: 'foo',
},
},
},
}}>
# Hello world!
</Markdown>
), document.body);
/*
renders:
<div class="foo">
Hello World
</div>
*/
Depending on the type of element, there are some props that must be preserved to ensure the markdown is converted as intended. They are:
a
: title
, href
img
: title
, alt
, src
input[type="checkbox"]
: checked
, readonly
(specifically, the one rendered by a GFM task list)ol
: start
td
: style
th
: style
Any conflicts between passed props
and the specific properties above will be resolved in favor of markdown-to-jsx
's code.
If desired, the compiler function is a "named" export on the markdown-to-jsx
module:
import {compiler} from 'markdown-to-jsx';
import React from 'react';
import {render} from 'react-dom';
render(compiler('# Hello world!'), document.body);
/*
renders:
<h1>Hello world!</h1>
*/
It accepts the following arguments:
compiler(markdown: string, options: object?)
MIT
FAQs
Convert markdown to JSX with ease for React and React-like projects. Super lightweight and highly configurable.
The npm package markdown-to-jsx receives a total of 4,531,258 weekly downloads. As such, markdown-to-jsx popularity was classified as popular.
We found that markdown-to-jsx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.