Skip to content

Commit c03c2b2

Browse files
committed
readme updates
1 parent 0f57499 commit c03c2b2

File tree

1 file changed

+43
-1
lines changed

1 file changed

+43
-1
lines changed

README.md

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ The `<Markdown>` object takes the following common props:
6161

6262
| Property | Default | Required | Description
6363
| --- | --- | --- | ---
64-
| `children` | N/A | `true` | The markdown string to render
64+
| `children` | N/A | `true` | The markdown string to render, or the [pre-processed tree](#pre-processing)
6565
| `style` | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/styles.js) | `false` | An object to override the styling for the various rules, [see style section below](#style) for more info
6666
| `mergeStyle` | `true` | `false` | If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them
6767
| `rules` | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js) | `false` | An object of rules that specify how to render each markdown item, [see rules section below](#rules) for more info
@@ -1120,6 +1120,48 @@ export default App;
11201120
A full list of things you can turn off is [here](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/commonmark.js)
11211121

11221122

1123+
### Pre Processing
1124+
1125+
It is possible to need to pre-process the data outside of this library ([related discussion here](https://github.com/iamacup/react-native-markdown-display/issues/79)). As a result, you can pass an AST tree directly as the children like this:
1126+
1127+
```jsx
1128+
import React from 'react';
1129+
import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';
1130+
1131+
import Markdown, { MarkdownIt, tokensToAST, stringToTokens } from 'react-native-markdown-display';
1132+
1133+
const markdownItInstance = MarkdownIt({typographer: true});
1134+
1135+
const copy = `
1136+
# Hello this is a title
1137+
1138+
This is some text with **BOLD!**
1139+
`;
1140+
1141+
const ast = tokensToAST(stringToTokens(copy, markdownItInstance))
1142+
1143+
const App: () => React$Node = () => {
1144+
return (
1145+
<>
1146+
<StatusBar barStyle="dark-content" />
1147+
<SafeAreaView>
1148+
<ScrollView
1149+
contentInsetAdjustmentBehavior="automatic"
1150+
style={{height: '100%'}}
1151+
>
1152+
<Markdown
1153+
>
1154+
{ast}
1155+
</Markdown>
1156+
</ScrollView>
1157+
</SafeAreaView>
1158+
</>
1159+
);
1160+
};
1161+
1162+
export default App;
1163+
```
1164+
11231165

11241166
### Other Notes
11251167

0 commit comments

Comments
 (0)