Markdown component for React

Overview

react-markdown

Build Coverage Downloads Size Sponsors Backers Chat

Markdown component for React using remark.

Learn markdown here and check out the demo here.

Install

npm:

npm install react-markdown

Why this one?

There are other ways for markdown in React out there so why use this one? The two main reasons are that they often rely on dangerouslySetInnerHTML or have bugs with how they handle markdown. react-markdown uses a syntax tree to build the virtual dom which allows for updating only the changing DOM instead of completely overwriting. react-markdown is 100% CommonMark (optionally GFM) compliant and has extensions to support custom syntax.

Use

A basic hello world:

import React from 'react'
import ReactMarkdown from 'react-markdown'
import {render} from 'react-dom'

render(<ReactMarkdown># Hello, *world*!</ReactMarkdown>, document.body)
Show equivalent JSX
<h1>
  Hello, <em>world</em>!
</h1>

Here is an example using requires, passing the markdown as a string, and how to use a plugin (remark-gfm, which adds support for strikethrough, tables, tasklists and URLs directly):

const React = require('react')
const ReactMarkdown = require('react-markdown')
const render = require('react-dom').render
const gfm = require('remark-gfm')

const markdown = `Just a link: https://reactjs.com.`

render(<ReactMarkdown plugins={[gfm]} children={markdown} />, document.body)
Show equivalent JSX
<p>
  Just a link: <a href="https://reactjs.com">https://reactjs.com</a>.
</p>

API

props

  • children (string, default: '')
    Markdown to parse
  • className (string?)
    Wrap the markdown in a div with this class name
  • allowDangerousHtml (boolean, default: false)
    This project is safe by default and escapes HTML. Use allowDangerousHtml: true to allow dangerous html instead. See security
  • skipHtml (boolean, default: false)
    Ignore HTML in Markdown
  • sourcePos (boolean, default: false)
    Pass a prop to all renderers with a serialized position (data-sourcepos="3:1-3:13")
  • rawSourcePos (boolean, default: false)
    Pass a prop to all renderers with their position (sourcePosition: {start: {line: 3, column: 1}, end:…})
  • includeNodeIndex (boolean, default: false)
    Pass index and parentChildCount in props to all renderers
  • allowedTypes (Array.<string>, default: list of all types)
    Node types to allow (can’t combine w/ disallowedTypes). All types are available at ReactMarkdown.types
  • disallowedTypes (Array.<string>, default: [])
    Node types to disallow (can’t combine w/ allowedTypes)
  • allowNode ((node, index, parent) => boolean?, optional)
    Function called to check if a node is allowed (when truthy) or not. allowedTypes / disallowedTypes is used first!
  • unwrapDisallowed (boolean, default: false)
    Extract (unwrap) the children of not allowed nodes. By default, when strong is not allowed, it and it’s content is dropped, but with unwrapDisallowed the node itself is dropped but the content used
  • linkTarget (string or (url, text, title) => string, optional)
    Target to use on links (such as _blank for <a target="_blank"…)
  • transformLinkUri ((uri) => string, default: ./uri-transformer.js, optional)
    URL to use for links. The default allows only http, https, mailto, and tel, and is available at ReactMarkdown.uriTransformer. Pass null to allow all URLs. See security
  • transformImageUri ((uri) => string, default: ./uri-transformer.js, optional)
    Same as transformLinkUri but for images
  • renderers (Object.<Component>, default: {})
    Object mapping node types to React components. Merged with the default renderers (available at ReactMarkdown.renderers). Which props are passed varies based on the node
  • plugins (Array.<Plugin>, default: [])
    List of remark plugins to use. See the next section for examples on how to pass options

Examples

Use a plugin

This example shows how to use a plugin. In this case, remark-gfm, which adds support for strikethrough, tables, tasklists and URLs directly:

import React from 'react'
import ReactMarkdown from 'react-markdown'
import {render} from 'react-dom'
import gfm from 'remark-gfm'

const markdown = `A paragraph with *emphasis* and **strong importance**.

> A block quote with ~strikethrough~ and a URL: https://reactjs.org.

* Lists
* [ ] todo
* [x] done

A table:

| a | b |
| - | - |
`

render(<ReactMarkdown plugins={[gfm]} children={markdown} />, document.body)
Show equivalent JSX
<>
  <p>
    A paragraph with <em>emphasis</em> and <strong>strong importance</strong>.
  </p>
  <blockquote>
    <p>
      A block quote with <del>strikethrough</del> and a URL:{' '}
      <a href="https://reactjs.org">https://reactjs.org</a>.
    </p>
  </blockquote>
  <ul>
    <li>Lists</li>
    <li>
      <input checked={false} readOnly={true} type="checkbox" /> todo
    </li>
    <li>
      <input checked={true} readOnly={true} type="checkbox" /> done
    </li>
  </ul>
  <p>A table:</p>
  <table>
    <thead>
      <tr>
        <td>a</td>
        <td>b</td>
      </tr>
    </thead>
  </table>
</>

Use a plugin with options

This example shows how to use a plugin and give it options. To do that, use an array with the plugin at the first place, and the options second. remark-gfm has an option to allow only double tildes for strikethrough:

import React from 'react'
import ReactMarkdown from 'react-markdown'
import {render} from 'react-dom'
import gfm from 'remark-gfm'

render(
  <ReactMarkdown plugins={[[gfm, {singleTilde: false}]]}>
    This ~is not~ strikethrough, but ~~this is~~!
  </ReactMarkdown>,
  document.body
)
Show equivalent JSX
<p>
  This ~is not~ strikethrough, but <del>this is</del>!
</p>

Use custom renderers (syntax highlight)

This example shows how you can overwrite the normal handling of a node by passing a renderer. In this case, we apply syntax highlighting with the seriously super amazing react-syntax-highlighter by @conorhastings:

import React from 'react'
import ReactMarkdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
import {render} from 'react-dom'

const renderers = {
  code: ({language, value}) => {
    return <SyntaxHighlighter style={dark} language={language} children={value} />
  }
}

// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code:

~~~js
console.log('It works!')
~~~
`

render(<ReactMarkdown renderers={renderers} children={markdown} />, document.body)
Show equivalent JSX
<>
  <p>Here is some JavaScript code:</p>
  <SyntaxHighlighter language="js" style={dark} children="console.log('It works!')" />
</>

Use a plugin and custom renderers (math)

This example shows how a syntax extension is used to support math in markdown that adds new node types (remark-math), which are then handled by renderers to use @matejmazur/react-katex:

import React from 'react'
import ReactMarkdown from 'react-markdown'
import Tex from '@matejmazur/react-katex'
import {render} from 'react-dom'
import math from 'remark-math'
import 'katex/dist/katex.min.css' // `react-katex` does not import the CSS for you

const renderers = {
  inlineMath: ({value}) => <Tex math={value} />,
  math: ({value}) => <Tex block math={value} />
}

render(
  <ReactMarkdown
    plugins={[math]}
    renderers={renderers}
    children={`The lift coefficient ($C_L$) is a dimensionless coefficient.`}
  />,
  document.body
)
Show equivalent JSX
<p>
  The lift coefficient (<Tex math="C_L" />) is a dimensionless coefficient.
</p>

Appendix A: HTML in markdown

react-markdown typically escapes HTML (or ignores it, with skipHtml), because it is dangerous and defeats the purpose of this library.

However, if you are in a trusted environment (you trust the markdown), you can react-markdown/with-html:

const React = require('react')
const ReactMarkdownWithHtml = require('react-markdown/with-html')
const render = require('react-dom').render

const markdown = `
This Markdown contains <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, and will require the <code>html-parser</code> AST plugin to be loaded, in addition to setting the <code class="prop">allowDangerousHtml</code> property to false.
`

render(<ReactMarkdownWithHtml children={markdown} allowDangerousHtml />, document.body)
Show equivalent JSX
<p>
  This Markdown contains <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, and will require
  the <code>html-parser</code> AST plugin to be loaded, in addition to setting the{' '}
  <code className="prop">allowDangerousHtml</code> property to false.
</p>

If you want to specify options for the HTML parsing step, you can instead import the extension directly:

const ReactMarkdown = require('react-markdown')
const htmlParser = require('react-markdown/plugins/html-parser')

// For more info on the processing instructions, see
// <https://github.com/aknuds1/html-to-react#with-custom-processing-instructions>
const parse = htmlParser({
  isValidNode: (node) => node.type !== 'script',
  processingInstructions: [/* ... */]
})

<ReactMarkdown htmlParser={parse} allowDangerousHtml children={markdown} />

Appendix B: Node types

The node types available by default are:

  • root — Whole document
  • text — Text (foo)
  • break — Hard break (<br>)
  • paragraph — Paragraph (<p>)
  • emphasis — Emphasis (<em>)
  • strong — Strong (<strong>)
  • thematicBreak — Horizontal rule (<hr>)
  • blockquote — Block quote (<blockquote>)
  • link — Link (<a>)
  • image — Image (<img>)
  • linkReference — Link through a reference (<a>)
  • imageReference — Image through a reference (<img>)
  • list — List (<ul> or <ol>)
  • listItem — List item (<li>)
  • definition — Definition for a reference (not rendered)
  • heading — Heading (<h1> through <h6>)
  • inlineCode — Inline code (<code>)
  • code — Block of code (<pre><code>)
  • html — HTML node (Best-effort rendering)
  • virtualHtml — If allowDangerousHtml is not on and skipHtml is off, a naive HTML parser is used to support basic HTML
  • parsedHtml — If allowDangerousHtml is on, skipHtml is off, and html-parser is used, more advanced HTML is supported

With remark-gfm, the following are also available:

  • delete — Delete text (<del>)
  • table — Table (<table>)
  • tableHead — Table head (<thead>)
  • tableBody — Table body (<tbody>)
  • tableRow — Table row (<tr>)
  • tableCell — Table cell (<td> or <th>)

Security

Use of react-markdown is secure by default. Overwriting transformLinkUri or transformImageUri to something insecure or turning allowDangerousHtml on, will open you up to XSS vectors. Furthermore, the plugins you use and renderers you write may be insecure.

Related

  • MDX — JSX in markdown
  • remark-gfm — Plugin for GitHub flavored markdown support

Contribute

See contributing.md in remarkjs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Espen Hovlandsdal

Comments
  • suggest: support table

    suggest: support table

    suggest: support GFM(GitHub flavored markdown) tables: https://help.github.com/articles/organizing-information-with-tables/

    | Command | Description |
    | --- | --- |
    | `git status` | List all *new or modified* files |
    | `git diff` | Show file differences that **haven't been** staged |
    
    opened by sinkcup 32
  • Option for Setting target=

    Option for Setting target="_blank" on Links

    Is it feasible to allow this as an option for this package?

    Something like the following:

    <ReactMarkdown source={input} linkTargets="_blank"/>
    
    opened by Enijar 22
  •  Module

    Module "assert" has been externalized for browser compatibility and cannot be accessed in client code.

    Initial checklist

    Affected packages and versions

    7.0.0

    Link to runnable example

    No response

    Steps to reproduce

    import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm' <ReactMarkdown children={'# hello'} remarkPlugins={[remarkGfm]}>

    Expected behavior

    show hello

    Actual behavior

    Uncaught Error: Module "assert" has been externalized for browser compatibility and cannot be accessed in client code. at Object.get (browser-external:assert:3) at go (create-tokenizer.js:213) at main (create-tokenizer.js:198) at Object.write (create-tokenizer.js:124) at fromMarkdown (index.js:117) at parser (index.js:15) at Function.parse2 [as parse] (index.js:273) at ReactMarkdown (react-markdown.js:102) at renderWithHooks (react-dom.development.js:14985) at mountIndeterminateComponent (react-dom.development.js:17811)

    Runtime

    Node v12

    Package manager

    yarn v1

    OS

    macOS

    Build and bundle tools

    Vite

    👀 no/external 👎 phase/no 
    opened by Snnny 21
  • <div> cannot appear as a descendant of <p>.

    I am setting imageReference in renderers wich wrap img with div and I got this error

    const imageRenderer = ({src, alt}) => {
      return (
        <div className="markdown-image__wrapper">
          <img src={src} alt={alt || ''}/>
        </div>
      )
    }
    
    const renderers = {imageReference: imageRenderer}
    const md = <ReactMarkdown source={value}renderers={renderers}/>
    

    error:

    Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
        in div (at ...)
        in imageRenderer (created by ReactMarkdown)
        in p (created by ReactMarkdown)
        in div (created by ReactMarkdown)
    

    how I can fix this?

    Note: It render correctly, but error shown in console

    🙋 no/question 
    opened by smmoosavi 21
  • Ability to specify a custom text renderer/component removed in v6.0.0

    Ability to specify a custom text renderer/component removed in v6.0.0

    Subject of the issue

    Previous versions of react-markdown had the ability to provide a custom text renderer (for example, to filter the text or wrap all text in a Material UI Typography element). This functionality appears to have been removed in version 6.0.0, with no mention in the changelog or release notes.

    The only way I figured it out was noting there was no mapping for the old text render in this conversion chart and then searching through the code to find that references to the old text renderer were removed.

    At a minimum, it would be convenient if the removal of this functionality was documented somewhere (this issue may provide that). But it would also be great to have this functionality back.

    Old behavior

    In 5.x and prior, a custom renderer could be provided via the text renderer that would apply to all text nodes:

      <ReactMarkdown
        renderers={{
          text: ({ children }) => <Typography variant="body1">{children}</Typography>
        }}
        ...
      />
    

    Expected behavior

    A mapping would exist for the components to provide the same functionality that was available in previous versions, where all text nodes were rendered with the custom renderer:

      <ReactMarkdown
        components={{
          text: ({ children }) => <Typography variant="body1">{children}</Typography>
        }}
        ...
      />
    

    Actual behavior

    There is no way to override the rendering of text nodes anymore.

    👯 no/duplicate 🙋 no/question 
    opened by fastfedora 20
  • TypeError: parser is not a function

    TypeError: parser is not a function

    This error occurs because micromark (https://github.com/micromark/micromark/releases) updated from 2.10.1 to 2.11.0.

    This lib is found in this dependency chain: react-markdown > remark-parse > mdast-util-from-markdown > micormark.

    I fixed this issue by adding to my package.json:

    "resolutions": {
        "mdast-util-from-markdown": "0.8.3"
    },
    
    👀 no/external 
    opened by pmartin-cogility 20
  • Allow multiple new lines in markdown

    Allow multiple new lines in markdown

    Is there a way to allow multiple newlines in markdown? I am running data from draftjs to markdown, which then later can be converted to html when needed. But if people add multiple new lines, these are always removed.

    🙋 no/question 
    opened by sinnbeck 20
  • Add `ImageComponent` into types.

    Add `ImageComponent` into types.

    Almost the same like this: https://github.com/remarkjs/react-markdown/pull/591 Attend to fix this: https://github.com/remarkjs/remark/discussions/744#discussioncomment-863903

    ☂️ area/types 🧒 semver/minor 🦋 type/enhancement 
    opened by SalahAdDin 18
  • Error importing component in Jest tests with TypeScript

    Error importing component in Jest tests with TypeScript

    Initial checklist

    Affected packages and versions

    react-markdown@npm:7.0.0 [bad77] (via npm:^7.0.0 [bad77])

    Link to runnable example

    https://github.com/tubbo/react-markdown-repro

    Steps to reproduce

    Install react-markdown on a TypeScript project and try to use it in a test. I used CRA in my example but that isn't strictly necessary, as I came across the issue on an Electron project. Trying to configure transformIgnorePatterns to whitelist this module also proves impossible, as you have to also whitelist every dependency of the module which is a nightmare.

    Expected behavior

    Test should run without having trouble importing the file

    Actual behavior

     FAIL  src/community/community.test.tsx
      ● Test suite failed to run
    
        Jest encountered an unexpected token
    
        Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
    
        Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
    
        By default "node_modules" folder is ignored by transformers.
    
        Here's what you can do:
         • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
         • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
         • If you need a custom transformation specify a "transform" option in your config.
         • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
    
        You'll find more details and examples of these config options in the docs:
        https://jestjs.io/docs/configuration
        For information about custom transformations, see:
        https://jestjs.io/docs/code-transformation
    
        Details:
    
        /[...]/node_modules/react-markdown/index.js:5
        import { ReactMarkdown } from './lib/react-markdown.js';
        ^^^^^^
    
        SyntaxError: Cannot use import statement outside a module
    
        > 1 | import ReactMarkdown from 'react-markdown'
    

    Runtime

    Node v14

    Package manager

    yarn v2

    OS

    macOS

    Build and bundle tools

    Webpack, Other (please specify in steps to reproduce)

    🙋 no/question 👎 phase/no 
    opened by tubbo 17
  • Add types for custom tags on component prop

    Add types for custom tags on component prop

    Subject of the issue

    I think it is not possible to add components / renderers for custom tags like myCustomTag with typescript.

    Problem

    Lets say I'm using a plugin that creates custom tags e.g. myCustomTag and I want to render a custom component for it:

    const components = { myCustomTag: ({node, ...props}) => <MyCustomComponent {...props} /> }
    
    <ReactMarkdown
      remarkPlugins={[myPlugin]}
      components={components}
    />
    

    Then I get a type error that myCustomTag is not allowed. This works fine if I set components to any.

    Expected behavior

    I should be able to add component renderers for custom tags without typescript complaining. It would be super cool if I could define custom tags with their respected properties…

    👀 no/external 🏗 area/tools ☂️ area/types 👎 phase/no 
    opened by errnesto 17
  • enable plugins with transforms

    enable plugins with transforms

    Allowing remark to execute parser.runSync() so that plugin transforms can be applied to the AST tree. Demo here: https://frankieali.github.io/react-markdown/demo/dist/

    Closes #188

    opened by frankieali 17
  • Explicitly typed components cannot be easily passed due to broken children prop type

    Explicitly typed components cannot be easily passed due to broken children prop type

    Initial checklist

    Affected packages and versions

    [email protected]

    Link to runnable example

    https://stackblitz.com/edit/github-uwhlug?file=src%2Findex.tsx

    Steps to reproduce

    I'm working in a codebase that uses a lot of components explicitly declared as const SomeComponent: React.FC<Props>. I'd like to pass an existing component to react-markdown without wrapping it in a function:

    import React, { HTMLAttributes, FC } from 'react';
    import { HTMLAttributes, FC } from 'react'
    import { Components } from 'react-markdown'
    import { HeadingProps } from 'react-markdown/lib/ast-to-react'
    
    // This is a <h1> with the props accepted by HTML's <h1>...
    type H1Props = HTMLAttributes<HTMLHeadingElement>
    const HtmlH1: FC<H1Props> = () => null
    
    const components: Components = {
      // It doesn't work:
      h1: HtmlH1,
      // Works, but ugly:
      h2: (props) => <HtmlH1 {...props} />,
    }
    
    // This is a <h1> with the prop types wanted by react-markdown...
    const ReactMarkdownH1: FC<HeadingProps> = () => null
    
    // It can't be easily used as-is:
    const element = <ReactMarkdownH1>Foo</ReactMarkdownH1>
    

    Expected behavior

    I would expect the "vanilla" h1 component to work with react-markdown.

    Actual behavior

    I need to wrap the component to make it work.

    Even though HeadingProps is assignable to HTMLAttributes, ComponentType<HTMLAttributes> isn't compatible with ComponentType<HeadingProps> since it would need the props to be assignable both ways.

    Potential fix

    Changing ReactMarkdownProps.children to ReactNode would seem to make the prop types compatible. However, it may be a breaking change for people who expect to get an array in children from react-markdown.

    Runtime

    No response

    Package manager

    No response

    OS

    No response

    Build and bundle tools

    No response

    ☂️ area/types 🙆 yes/confirmed 👍 phase/yes 
    opened by PurkkaKoodari 8
  • React keys are explicitly unoptimized for re-rendering

    React keys are explicitly unoptimized for re-rendering

    Initial checklist

    Problem

    As can be seen here, React keys are generated using the name, line, column, and node index. This means that:

    • If the type is changed, it will be presented to React as a new node.
    • If a user enters a newline above the node, it will be presented to React as a new node.
    • If a user changes the content above the node to change the node count (i.e. splitting one paragraph into two), it will be presented to React as a new node.

    This means the key is explicitly unoptimized for React re-rendering.

    Solution

    The key should be calculated as the nth instance if that tag name.

    I.e. the following markdown:

    # Title
    
    This is a paragraph
    
    ![image](./image.png)
    
    This is another paragraph
    

    should be represented as:

    <h1 key="h1-0" />
    <p key="p-0" />
    <img key="img-0" />
    <p key="p-1" />
    

    This way if a paragraph changes, only that paragraph is changed. If another paragraph is inserted or removed, only all paragraphs that come after the edited paragraph are rerendered.

    Alternatives

    1. Don’t specify a key. This is more performant than the current situation, but React will show warnings.
    2. Change the key to just the index. This is the default behaviour if a key is missing, but React won’t show a warning.
    🤞 phase/open 
    opened by remcohaszing 5
  • Add async processing support to support async plugins

    Add async processing support to support async plugins

    Resolves #680

    Initial checklist

    • [x] I read the support docs
    • [x] I read the contributing guide
    • [x] I agree to follow the code of conduct
    • [x] I searched issues and couldn’t find anything (or linked relevant results below)
    • [x] If applicable, I’ve added docs and tests

    Description of changes

    Added an async option to the component. If true, runs the renderer using processor.run instead of processor.runSync (which causes an error be thrown).

    🤞 phase/open 
    opened by mikesir87 9
  • Some plugins require async run

    Some plugins require async run

    Initial checklist

    Affected packages and versions

    8.0.2

    Link to runnable example

    https://codesandbox.io/s/nice-austin-wrug0t

    Steps to reproduce

    1. Install remark-code-frontmatter
    2. Install remark-code-extra
    3. Configure the component to use both plugins
    4. See error

    Expected behavior

    The render still works.

    Actual behavior

    When using the remark-code-frontmatter and remark-code-extra plugins, I'm getting the following error:

    index.js:566 Uncaught (in promise) Error: `runSync` finished async. Use `run` instead
        at assertDone (index.js:566)
        at Function.runSync (index.js:352)
        at ReactMarkdown (react-markdown.js:107)
        at renderWithHooks (react-dom.development.js:14985)
        at mountIndeterminateComponent (react-dom.development.js:17811)
        at beginWork (react-dom.development.js:19049)
        at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
        at invokeGuardedCallback (react-dom.development.js:4056)
        at beginWork$1 (react-dom.development.js:23964)
    

    Digging in, it looks like the remark-code-extra plugin is returning Promises, forcing the async flow.

    Runtime

    No response

    Package manager

    No response

    OS

    No response

    Build and bundle tools

    No response

    👍 phase/yes 
    opened by mikesir87 12
Releases(8.0.4)
  • 8.0.4(Dec 1, 2022)

    • 9b20440 Fix type of td, th props by @lucasassisrosa in https://github.com/remarkjs/react-markdown/pull/714
    • cfe075b Add clarification of alt on img in docs by @cballenar in https://github.com/remarkjs/react-markdown/pull/692

    Full Changelog: https://github.com/remarkjs/react-markdown/compare/8.0.3...8.0.4

    Source code(tar.gz)
    Source code(zip)
  • 8.0.3(Apr 20, 2022)

    • a2fb833 Fix prop types of plugins by @starpit in https://github.com/remarkjs/react-markdown/pull/683

    Full Changelog: https://github.com/remarkjs/react-markdown/compare/8.0.2...8.0.3

    Source code(tar.gz)
    Source code(zip)
  • 8.0.2(Mar 31, 2022)

    • 2712227 Update react-is
    • 704c3c6 Fix TypeScript bug by adding workaround by @Methuselah96 in https://github.com/remarkjs/react-markdown/pull/676

    Full Changelog: https://github.com/remarkjs/react-markdown/compare/8.0.1...8.0.2

    Source code(tar.gz)
    Source code(zip)
  • 8.0.1(Mar 14, 2022)

    • c23ecf6 Add missing dependency for types by @Methuselah96 in https://github.com/remarkjs/react-markdown/pull/675

    Full Changelog: https://github.com/remarkjs/react-markdown/compare/8.0.0...8.0.1

    Source code(tar.gz)
    Source code(zip)
  • 8.0.0(Jan 17, 2022)

    What's Changed

    • cd845c9 Remove deprecated plugins option (migrate by renaming it to remarkPlugins)
    • 36e4916 Update remark-rehype, add support for passing it options by @peolic in #669 (migrate by removing remark-footnotes and updating remark-gfm if you were using them, otherwise you shouldn’t notice this)

    Full Changelog: https://github.com/remarkjs/react-markdown/compare/7.1.2...8.0.0

    Source code(tar.gz)
    Source code(zip)
  • 7.1.2(Jan 2, 2022)

    • 656a4fa Fix ref in types by @ChristianMurphy in https://github.com/remarkjs/react-markdown/pull/668

    Full Changelog: https://github.com/remarkjs/react-markdown/compare/7.1.1...7.1.2

    Source code(tar.gz)
    Source code(zip)
  • 7.1.1(Nov 29, 2021)

    • 4185f06 Add improved docs by @wooorm in https://github.com/remarkjs/react-markdown/pull/657

    Full Changelog: https://github.com/remarkjs/react-markdown/compare/7.1.0...7.1.1

    Source code(tar.gz)
    Source code(zip)
  • 7.1.0(Oct 21, 2021)

    What's Changed

    • 7b8a829 Add support for SpecialComponents to be any ComponentType by @Methuselah96 in https://github.com/remarkjs/react-markdown/pull/640
    • a7c26fc Remove warning on whitespace in tables

    Full Changelog: https://github.com/remarkjs/react-markdown/compare/7.0.1...7.1.0

    Source code(tar.gz)
    Source code(zip)
  • 7.0.0(Aug 13, 2021)

  • 6.0.0(Apr 15, 2021)

Owner
remark
markdown processor powered by plugins part of the @unifiedjs collective
remark
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
The Select Component for React.js

React-Select The Select control for React. Initially built for use in KeystoneJS. See react-select.com for live demos and comprehensive docs. React Se

Jed Watson 25.6k Jan 3, 2023
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 3, 2023
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10.6k Jan 5, 2023
React draggable component

React-Draggable A simple component for making elements draggable. <Draggable> <div>I can now be moved around!</div> </Draggable> Demo Changelog Vers

RGL 8.1k Jan 4, 2023
A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

Uber Open Source 8.1k Dec 29, 2022
Accessible modal dialog component for React

react-modal Accessible modal dialog component for React.JS Table of Contents Installation API documentation Examples Demos Installation To install, yo

React Community 7.1k Jan 1, 2023
Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

React Table + Tailwind CSS = ❤️ Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS. Both parts

Samuel Liedtke 147 Jan 7, 2023
A headless React component that lets you control how visible and overflown items are rendered 👀

react-overflow-list A hooks based implementation of the OverflowList component from Blueprint JS. Installation yarn add react-overflow-list Basic Usa

Matt Rothenberg 9 May 31, 2022
A react native component that lets you build a dynamic expandable chips list.

React Native Expandable Chips List A react native component that lets you build a dynamic expandable chips list. Installation Run npm install react-na

Daniel Cocos 13 Sep 23, 2022
Collection of Animated 60 FPS TabBar Component's based on React Navigation.

React Navigation TabBar Collection Collection of Animated 60 FPS TabBar Components based on React Navigation. Features 60 FPS Animation Beautiful TabB

Mikalyh 22 Dec 9, 2022
React component library for displaying code samples with syntax highlighting!!

react-code-samples usage example: import {} from 'react-code-samples'; import 'highlight.js/styles/default.css'; // or use another highlight js style

Pranav Teegavarapu 8 Jan 3, 2022
Accessible, unstyled, open-sourced, and fully functional react component library for building design systems

DORAI UI Accessible, unstyled, open-sourced and fully functional react component library for building design systems Documentation site coming soon St

Fakorede Boluwatife 38 Dec 30, 2022
A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere

@yomo/react-cursor-chat ?? Introduction A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real

YoMo 84 Nov 17, 2022
This simple and small react component can check your repository stars and change theme on light/dark

Repository metrics for react This beauty and easy (4KB) react component can help you add metrics to your repositories also you can change component th

Koma Human 2 Jun 25, 2022
React Native's Global Alert Component that can be fully customized and without the need of a state.

?? React Native Easy Alert React Native Easy Alert Component. Watch on youtube Easy Alert example app. React Native's Global Alert Component that can

null 9 Feb 21, 2022