https://github.com/gaumala/simple-commonmark-react-router

Render Markdown links with React Router's navigation
https://github.com/gaumala/simple-commonmark-react-router

commonmark javascript markdown react react-router typescript

Last synced: 2 months ago
JSON representation

Render Markdown links with React Router's navigation

• Host: GitHub
• URL: https://github.com/gaumala/simple-commonmark-react-router
• Owner: GAumala
• Created: 2017-05-31T21:51:17.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-06-04T04:00:22.000Z (about 9 years ago)
• Last Synced: 2025-02-07T05:25:56.605Z (over 1 year ago)
• Topics: commonmark, javascript, markdown, react, react-router, typescript
• Language: JavaScript
• Size: 59.6 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Simple CommonMark React Router

[![Build Status](https://travis-ci.org/GAumala/simple-commonmark-react-router.svg?branch=master)](https://travis-ci.org/GAumala/simple-commonmark-react-router) [![Coverage Status](https://coveralls.io/repos/github/GAumala/simple-commonmark-react-router/badge.svg?branch=master)](https://coveralls.io/github/GAumala/simple-commonmark-react-router?branch=master)

Easily integrate [React Router](https://reacttraining.com/react-router/) with [simple-commonmark-react](https://github.com/GAumala/simple-commonmark-react)

## Install

```

yarn add simple-commonmark-react-router

```

## Example

The following example renders markdown links with React Router's Link component.

```javascript

import React from 'react'

import {

  BrowserRouter as Router,

  Route,

} from 'react-router-dom'

import { renderNodes } from 'simple-commonmark-react'

import ReactRouterLinkRenderer from 'simple-commonmark-react-router'

class MarkdownComponent extends React.Component {

  render() {

    const source = this.props.markdownText

    const markdownOptions = {

      className: 'markdown',

      customRenderers: { link: ReactRouterLinkRenderer }

    }

    return (

      

        //Here you could put your routes

        


          { renderNodes(source, markdownOptions) }  

        

      

    )

  }  

}

```