Skip to content

Commit 51a625b

Browse files
committed
docs: update readme
1 parent 681a871 commit 51a625b

File tree

1 file changed

+47
-6
lines changed

1 file changed

+47
-6
lines changed

README.md

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,58 @@
11
# react-native-code-highlighter
22

3-
Code/Syntax highlighter for React Native
3+
Code/Syntax highlighter for React Native. Inspired by [react-native-syntax-highlighter](https://github.com/conorhastings/react-native-syntax-highlighter), using [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)
44

55
## Installation
66

77
```sh
88
npm install react-native-code-highlighter
9+
or
10+
yarn add react-native-code-highlighter
911
```
1012

1113
## Usage
1214

13-
```js
14-
import { multiply } from 'react-native-code-highlighter';
15+
### Props
16+
| Prop | Description | Type | Optional |
17+
|------------------------------------------------------------------------------------------------------------- |---------------------------------------------------------------------------------- |------------------------------------------ |---------- |
18+
| hljsStyle | Highlight.js style imported from `react-syntax-highlighter/dist/esm/styles/hljs` | `{ [key: string]: React.CSSProperties }` | false |
19+
| containerStyle | `containerStyle` for the underlying `ScrollView` | `StyleProp<br><ViewStyle>` | true |
20+
| textStyle | Style for the text components. Note: `color` property will be overridden | `StyleProp<TextStyle> | true |
21+
| [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) Props | Props from supported by react-syntax-highlighter | | |
1522

16-
// ...
1723

18-
const result = await multiply(3, 7);
24+
### Example
25+
26+
```tsx
27+
import React from "react";
28+
import { StyleSheet } from "react-native";
29+
import CodeHighlighter from "react-native-code-highlighter";
30+
import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs";
31+
32+
const CODE_STR = `var hello = "world"`;
33+
34+
export default function HighlightComponent() {
35+
return (
36+
<CodeHighlighter
37+
hljsStyle={atomOneDarkReasonable}
38+
containerStyle={styles.codeContainer}
39+
textStyle={styles.text}
40+
language="typescript"
41+
>
42+
{CODE_STR}
43+
</CodeHighlighter>
44+
);
45+
}
46+
47+
const styles = StyleSheet.create({
48+
codeContainer: {
49+
padding: 16,
50+
minWidth: "100%",
51+
},
52+
text: {
53+
fontSize: 16,
54+
},
55+
});
1956
```
2057

2158
## Contributing
@@ -28,4 +65,8 @@ MIT
2865

2966
---
3067

31-
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
68+
## Built using
69+
- [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
70+
- [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)
71+
- [trim-newlines](https://github.com/sindresorhus/trim-newlines)
72+
- [css-to-react-native](https://github.com/styled-components/css-to-react-native)

0 commit comments

Comments
 (0)