besirovic / markdown-to-react

Demo app for parsing markdown to react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Markdown to React parser (with Picasso)

Very simple app to demonstrate parsing markdown to React with overriding html elements with React component provided by Picasso library

This demo will replce following HTML tags with corresponding Picasso component:

  • a tag to Link component
  • h1, h2 and h3 to Typography component with heading variant
  • p to Typography component with body variant

Also, it allows you to use and parse components from Picasso directly in markdown. Currently just Typography and Link components are covered and will be parsed.

Demo

Visit demo page and try it on your own

Copy and past following text and press Run button

# Heading 1
## Heading 2
### Heading 3

Paragraphy

[Markdown link](http://toptal.com)

<Typography variant='heading' color='blue'>Typography component with custom color</Typography>

<Link target='_blank' href='http://toptal.com'>Link component</Link>

Also there is posibility to fetch content dynamically from .md file. To test it click on Load .md file and you will see content loaded from demo.md file placed in project's src folder.

About

Demo app for parsing markdown to react


Languages

Language:TypeScript 62.6%Language:HTML 37.4%