react-native-markdown-simple
v2.1.0
Published
Render Markdown in React Native with native components (iOS & Android)
Downloads
4
Maintainers
Readme
react-native-simple-markdown
A component for rendering Markdown in React Native with native components, working with both iOS & Android. Pull requests are welcome 😃 🎉!
Getting started
yarn add react-native-simple-markdown
Usage
All you need is import the react-native-simple-markdown
and then use the
<Markdown />
component.
import React from 'react'
import Markdown from 'react-native-simple-markdown'
const MyAwesomeApp = () => {
return (
<Markdown styles={styles}>
#Markdown in react-native is so cool!
You can **emphasize** what you want, or just _suggest it_ 😏…
You can even [link your website](http://charlesmangwa.surge.sh) or if you prefer: [email somebody](mailto:[email protected])
Spice it up with some GIF 💃:
![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif)
And even add a cool video 😎!
[![A cool video from YT](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)
[![Another one from Vimeo](https://i.vimeocdn.com/video/399486266_640.jpg)](https://vimeo.com/57580368)
</Markdown>
)
}
const styles = {
heading1: {
fontSize: 22,
},
strong: {
fontSize: 18,
},
paragraph: {
fontSize: 14,
},
view: {
borderWidth: 1,
},
}
Properties
styles
The Markdown will apply its style by default. However you can pass a styles
prop to customize it has you want.
Example:
<Markdown
styles={{
heading1: {
fontSize: 20,
},
strong: {
fontWeight: 'bold',
}
}}
>
#Hello 👋
</Markdown>
rules
The Markdown will apply its rules by default. However you can pass a rules
prop to add your own and then customize how the Markdown elements will be displayed!
Example:
<Markdown
rules={{
image: {
react: (node, output, state) => (
<CustomImageComponent
key={state.key}
source={{ uri: node.target }}
/>
),
},
}}
>
![Alt text](/path/to/img.jpg)
</Markdown>
RNSM also allows you to remove easily unwanted styling options without having to pass in rule objects that have their react key implemented/dummied to ignore those styling options.
Example:
<Markdown
styles={ markdownStyles }
whitelist={['link', 'url']}
>
{ description }
</Markdown>
Will only apply the default styles for link
and url
. You don't need to pass in a rules prop that contained a key for all the styles you don't want and reimplement their styling output anymore.
Features
blockQuote
(<View>
) - AlsoblockQuoteBar
andblockQuoteText
br
(<Text>
)del
(<Text>
)em
(<Text>
)hr
(<View>
)heading
(<Text>
) - Alsoheading1
throughheading6
inlineCode
(<Text>
)image
(<Image>
) - You can useresizeMode
in<Markdown />
styles prop to set a resizeModelink
(Text
)list
(<View>
) - AlsolistItem
(<View>
),listItemBullet
(<Text>
),listItemBulletType
(Unicode character
),listItemNumber
(<Text>
) andlistItemText
(<Text>
)mailTo
(Text
)paragraph
(<View>
)plainText
(<Text>
) - Use for styling text without any associated stylesstrong
(<Text>
)table
(<View>
)tableHeader
(<View>
)tableHeaderCell
(<Text>
)tableRow
(<View>
)tableRowCell
(<View>
)tableRowLast
(<View>
, inherits fromtableRow
)text
(<Text>
) - Inherited by all text based elementsu
(<View>
)url
(<Text>
)video
(<Image>
) - Supports Youtube & Vimeoview
(<View>
) - This is theView
container where the Markdown is render.
WIP
Most of these elements can be used, but I'm still working on some improvements. Pull requests are welcome!
autolink
(<Text>
)codeBlock
(<Text>
)
Credits
This project was forked from react-native-markdown
by @lwansbrough.