Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Expensify/react-native-live-markdown
Drop-in replacement for React Native's TextInput component with Markdown formatting.
https://github.com/Expensify/react-native-live-markdown
markdown react-native textinput
Last synced: 3 months ago
JSON representation
Drop-in replacement for React Native's TextInput component with Markdown formatting.
- Host: GitHub
- URL: https://github.com/Expensify/react-native-live-markdown
- Owner: Expensify
- License: mit
- Created: 2023-11-20T08:24:03.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-04-18T06:43:24.000Z (7 months ago)
- Last Synced: 2024-04-18T08:39:22.825Z (7 months ago)
- Topics: markdown, react-native, textinput
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@expensify/react-native-live-markdown
- Size: 4.16 MB
- Stars: 567
- Watchers: 38
- Forks: 18
- Open Issues: 52
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## Features
- ⚛️ Drop-in replacement for `` component
- ⌨️ Live synchronous formatting on every keystroke
- ⚡ Fully native experience (selection, spellcheck, autocomplete)
- 🎨 Customizable styles
- 🌐 Universal support (Android, iOS, web)
- 🏗️ Supports New Architecture
## Installation
First, install the library from npm with the package manager of your choice:
```sh
yarn add @expensify/react-native-live-markdown
npm install @expensify/react-native-live-markdown --save
npx expo install @expensify/react-native-live-markdown
```
Then, install the iOS dependencies with CocoaPods:
```sh
cd ios && pod install
```
The library includes native code so you will need to re-build the native app.
> [!NOTE]
> The library does not support Expo Go, you will need to setup Expo Dev Client (see [here](https://docs.expo.dev/workflow/prebuild/)).
## Usage
```tsx
import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
import React from 'react';
export default function App() {
const [text, setText] = React.useState('Hello, *world*!');
return (
);
}
```
## Styling
`MarkdownTextInput` can be styled using `style` prop just like regular `TextInput` component.
It is also possible to customize the styling of the formatted contents of `MarkdownTextInput` component. The style object supports all color representations from React Native including `PlatformColor` and `DynamicColorIOS` according to the [color reference](https://reactnative.dev/docs/colors). Currently, a limited set of styles is customizable but this is subject to change in the future.
```tsx
import type {MarkdownStyle} from '@expensify/react-native-live-markdown';
const FONT_FAMILY_MONOSPACE = Platform.select({
ios: 'Courier',
default: 'monospace',
});
const markdownStyle: MarkdownStyle = {
syntax: {
color: 'gray',
},
link: {
color: 'blue',
},
h1: {
fontSize: 25,
},
emoji: {
fontSize: 20,
},
blockquote: {
borderColor: 'gray',
borderWidth: 6,
marginLeft: 6,
paddingLeft: 6,
},
code: {
fontFamily: FONT_FAMILY_MONOSPACE,
fontSize: 20,
color: 'black',
backgroundColor: 'lightgray',
},
pre: {
fontFamily: FONT_FAMILY_MONOSPACE,
fontSize: 20,
color: 'black',
backgroundColor: 'lightgray',
},
mentionHere: {
color: 'green',
backgroundColor: 'lime',
},
mentionUser: {
color: 'blue',
backgroundColor: 'cyan',
},
};
```
The style object can be passed to multiple `MarkdownTextInput` components using `markdownStyle` prop:
```tsx
```
> [!TIP]
> We recommend to store the style object outside of a component body or memoize the style object with `React.useMemo`.
## Markdown flavors support
Currently, `react-native-live-markdown` supports only [ExpensiMark](https://github.com/Expensify/expensify-common/blob/main/lib/ExpensiMark.ts) flavor. We are working on CommonMark support as well as possibility to use other Markdown parsers.
## API reference
`MarkdownTextInput` inherits all props of React Native's `TextInput` component as well as introduces the following properties:
| Prop | Type | Default | Note |
| --------------- | --------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `markdownStyle` | `MarkdownStyle` | `undefined` | Adds custom styling to Markdown text. The provided value is merged with default style object. See [Styling](https://github.com/expensify/react-native-live-markdown/blob/main/README.md#styling) for more information. |
## Compatibility
`react-native-live-markdown` requires React Native 0.71 or newer.
## License
MIT
---
