Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/charlesmangwa/react-native-simple-markdown
📜 React Native Markdown component (iOS & Android).
https://github.com/charlesmangwa/react-native-simple-markdown
android ios library markdown react react-native
Last synced: 8 days ago
JSON representation
📜 React Native Markdown component (iOS & Android).
- Host: GitHub
- URL: https://github.com/charlesmangwa/react-native-simple-markdown
- Owner: CharlesMangwa
- License: mit
- Created: 2016-08-02T08:34:35.000Z (over 8 years ago)
- Default Branch: next
- Last Pushed: 2022-12-06T19:47:14.000Z (almost 2 years ago)
- Last Synced: 2024-10-19T23:52:10.685Z (17 days ago)
- Topics: android, ios, library, markdown, react, react-native
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-simple-markdown
- Size: 204 KB
- Stars: 414
- Watchers: 6
- Forks: 133
- Open Issues: 56
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-simple-markdown
[](https://circleci.com/gh/CharlesMangwa/react-native-simple-markdown)
[](https://www.npmjs.com/package/react-native-simple-markdown)
[](http://commitizen.github.io/cz-cli/)
[](https://www.npmjs.com/package/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`
## Future
This library is currently being (kinda) completely rewritten. If you've been using this lib for a short/long time or are interesting in shaping it for the future: [just chime in and share your thoughts with us](https://github.com/CharlesMangwa/react-native-simple-markdown/issues/75); or give a look at the [styles section](https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1), some help is also need there!
## Usage
All you need to do is import the `react-native-simple-markdown` and then use the
`` component.
```js
import React from 'react'
import Markdown from 'react-native-simple-markdown'
const MyAwesomeApp = () => {
return (
#Markdown in react-native is so cool! {'\n\n'}
You can **emphasize** what you want, or just _suggest it_ 😏…{'\n'}
You can even [**link your website**](https://twitter.com/Charles_Mangwa) or if you prefer: [email somebody](mailto:[email protected]){'\n'}
Spice it up with some GIFs 💃:
{'\n'}
And even add a cool video 😎!{'\n'}
[](http://www.youtube.com/watch?v=dQw4w9WgXcQ)
[](https://vimeo.com/57580368)
)
}
const markdownStyles = {
heading1: {
fontSize: 24,
color: 'purple',
},
link: {
color: 'pink',
},
mailTo: {
color: 'orange',
},
text: {
color: '#555555',
},
}
```
## Properties
### `styles`
`` will apply its style by default. However you can pass a `styles` prop to customize it has you wish.
Example:
```js
#Hello 👋
```
### `rules`
Here again, `` 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:
```js
(
),
},
}}
>
```
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:
```js
{ description }
```
`whitelist` will only apply `link` and `url` default styles, while `blacklist` will do the opposite. 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.
### errorHandler
If you happened to have an error with your Markdown during the rendering, you can pass a `errorHandler` with a function that will let you see what's going on:
```jsx
console.log(errors, children)}
>
...
```
## Styles
Given that the way React Native renders element has evolved in the latest versions (0.48+), we'll have to check manually that every single rule works as expected by:
- rendering properly on both iOS & Android
- being able to be styled on both platforms
- not breaking/overriding others rules when its own is applied
When those 3 criteria are fulfilled, we can validate the **Rendering** column. Feel free to check any of these and send a PR to validate it [on Snack](https://snack.expo.io/By2dzl04G)!
| Property | Type | Rendering | Features |
| ------ | ------ | ------ | ------ |
| `blockQuote` | `` | ❌ | Also `blockQuoteBar` (``) and `blockQuoteText` (``) |
| `br` | `` | ❌ | - |
| `del` | `` | ❌ | - |
| `em` | `` | ❌ | - |
| `hr` | `` | ❌ | - |
| `heading` | `` | ❌ | Also `heading1` through `heading6` |
| `image` | `` | ❌ | ou can use `resizeMode` in `` styles prop to set a `resizeMode` |
| `inlineCode` | `` | ❌ | - |
| `link` | `` | ❌ | - |
| `list` | `` | ❌ | Also `listItem` (``), `listItemBullet` (``), `listItemBulletType` (`Unicode character`), `listItemNumber` (``) and `listItemText` (``) |
| `mailTo` | `` | ❌ | - |
| `paragraph` | `` | ❌ | - |
| `plainText` | `` | ❌ | Used for styling text without any associated styles |
| `strong` | `` | ❌ | - |
| `table` | `` | ❌ | - |
| `tableHeader` | `` | ❌ | - |
| `tableHeaderCell` | `` | ❌ | - |
| `tableRow` | `` | ❌ | - |
| `tableRowCell` | `` | ❌ | - |
| `tableRowLast` | `` | ❌ | Inherits from `tableRow` |
| `text` | `` | ❌ | - |
| `u` | `` | ❌ | - |
| `url` | `` | ❌ | - |
| `video` | `` | ❌ | Supports YouTube & Vimeo |
| `view` | `` | ❌ | This is the `View` container where the Markdown is rendered |
## Credits
This project was forked from [`react-native-markdown`](https://github.com/lwansbrough/react-native-markdown) by [@lwansbrough](https://github.com/lwansbrough) 👍