https://github.com/iddan/react-universal-markdown
Markdown component for Web and Native powered by CommonMark
https://github.com/iddan/react-universal-markdown
Last synced: 10 months ago
JSON representation
Markdown component for Web and Native powered by CommonMark
- Host: GitHub
- URL: https://github.com/iddan/react-universal-markdown
- Owner: iddan
- Created: 2017-07-27T16:03:48.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T08:17:42.000Z (over 3 years ago)
- Last Synced: 2025-08-17T11:23:03.175Z (10 months ago)
- Language: JavaScript
- Size: 3.61 MB
- Stars: 11
- Watchers: 3
- Forks: 3
- Open Issues: 31
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
react-universal-markdown
Markdown component for Web and Native powered by CommonMark
```bash
npm install react-universal-markdown
```
### Usage
*With React DOM*
```jsx
import React, { Component } from 'react'
import Markdown from 'react-universal-markdown/dom'
export default class App extends Component {
render() {
return (
{`
Your markdown text
`}
)
}
}
```
*With React Native*
```jsx
import React, { Component } from 'react'
import Markdown from 'react-universal-markdown/native'
export default class App extends Component {
render() {
return (
{`
Your markdown text
`}
)
}
}
```
### API
#### DOMMarkdown
##### Props
...Markdown Props
- **className** to be added to the Document element. Other elements should be styled by CSS descendent selector. `string`]
#### DOMComponents
DOMMarkdown default components prop value
#### NativeMarkdown
##### Props
...Markdown Props
- **styles** styles to be applied to each element by type
```
{
Text : number | Object,
Em : number | Object,
Strong : number | Object,
Link : number | Object,
Image : number | Object,
Code : number | Object,
Paragraph : number | Object,
BlockQuote : number | Object,
Item : number | Object,
List : number | Object,
Heading : number | Object,
CodeBlock : number | Object,
ThematicBreak : number | Object,
Document : number | Object,
}
```
#### NativeComponents
NativeComponents default components prop value
#### Markdown
##### Props
- **customizer** a function to modify the parsed elements tree (AST). Executed for each level of the tree. `(children, render) => renderedChildren`
- **children** a markdown `string`
- **components** to be used for rendering markdown.
```
{
Text : Class | (props) => ReactElement,
Em : Class | (props) => ReactElement,
Strong : Class | (props) => ReactElement,
Link : Class | (props) => ReactElement,
Image : Class | (props) => ReactElement,
Code : Class | (props) => ReactElement,
Paragraph : Class | (props) => ReactElement,
BlockQuote : Class | (props) => ReactElement,
Item : Class | (props) => ReactElement,
List : Class | (props) => ReactElement,
Heading : Class | (props) => ReactElement,
CodeBlock : Class | (props) => ReactElement,
ThematicBreak : Class | (props) => ReactElement,
Document : Class | (props) => ReactElement,
}
```