npm package: @hake/react-native-markdown
Description: High-performance, extensible React Native Markdown component with remark support
Latest version: 0.1.44

# @hake/react-native-markdown

High-performance, extensible React Native Markdown component with full remark plugin support.


<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/1.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/2.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/3.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/4.png" />
</div>

## Features

- 🚀 **High Performance**: Direct AST-to-React Native rendering (no HTML conversion)
- 🔌 **Extensible**: Full support for remark plugins and custom renderers
- 📦 **Lightweight**: Only depends on remark-related packages
- 🎨 **Customizable**: Full control over styles and rendering(Light and Dark mode 
- 💪 **TypeScript**: Complete type definitions included
- ⚡ **Optimized**: Built-in memoization and caching

## Installation

```bash
npm install @hake/react-native-markdown
# or
yarn add @hake/react-native-markdown
# or
bun add @hake/react-native-markdown
```
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/1.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/2.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/3.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/4.png" />
</div>
## Quick Start

```tsx
import { MarkdownView } from '@hake/react-native-markdown';

function App() {
  return (
    <MarkdownView>
      {`# Hello World

This is **bold** and this is *italic*.

- Item 1
- Item 2
- Item 3`}
    </MarkdownView>
  );
}
```

## Basic Usage

### Simple Markdown Rendering

```tsx
import { MarkdownView } from '@hake/react-native-markdown';

<MarkdownView>
  {`# Heading 1
## Heading 2

A paragraph with **bold** and *italic* text.

\`\`\`javascript
const code = 'example';
\`\`\``}
</MarkdownView>
```

### Custom Styles

```tsx
import { MarkdownView } from '@hake/react-native-markdown';
import type { MarkdownStyles } from '@hake/react-native-markdown';

const customStyles: MarkdownStyles = {
  heading: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
  },
  paragraph: {
    marginBottom: 16,
    lineHeight: 24,
  },
  link: {
    color: '#0066cc',
    textDecorationLine: 'underline',
  },<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/1.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/2.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/3.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/4.png" />
</div>
};

<MarkdownView styles={customStyles}>
  {markdownContent}
</MarkdownView>
```

### Using Remark Plugins

```tsx
import { MarkdownView } from '@hake/react-native-markdown';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';

<MarkdownView
  plugins={[
    { plugin: remarkGfm },
    { plugin: remarkMath, options: { /* options */ } },
  ]}
>
  {markdownContent}
</MarkdownView>
```

### Custom Renderers

```tsx
import { MarkdownView } from '@hake/react-native-markdown';
import type { NodeRenderer } from '@hake/react-native-markdown';
import type { Heading } from 'mdast';
import { Text } from 'react-native';

const customHeadingRenderer: NodeRenderer<Heading> = (node, children) => {
  return (
    <Text style={{ fontSize: 24, fontWeight: 'bold', color: 'purple' }}>
      {children}
    </Text>
  );
};

<MarkdownView
  renderers={{
    heading: customHeadingRenderer,
  }}
>
  {markdownContent}
</MarkdownView>
```

### Code Syntax Highlighting

This package supports syntax highlighting for code blocks using [react-native-code-highlighter](https://github.com/gmsgowtham/react-native-code-highlighter) and [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter).

```tsx
import { MarkdownView } from '@hake/react-native-markdown';
import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/hljs';

<MarkdownView
  codeHighlighter={{
    hljsStyle: atomOneDarkReasonable,
    textStyle: { fontSize: 14 },
  }}
>
  {`\`\`\`javascript
const hello = "world";
console.log(hello);
\`\`\``}
</MarkdownView>
```

**Note:** All code (both inline and block) is rendered using CodeHighlighter. If `hljsStyle` is not provided, the default theme will be used.

### Link Handling

```tsx
import { Linking } from 'react-native';

<MarkdownView
  onLinkPress={(url) => {
    Linking.openURL(url).catch((err) => {
      console.error('Failed to open URL:', err);
    });
  }}
>
  {markdownContent}
</MarkdownView>
```

## API Reference

### `MarkdownView`

Main component for rendering markdown.

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `string` | required | Markdown content to render |
| `styles` | `MarkdownStyles` | `undefined` | Custom styles for markdown elements |
| `renderers` | `CustomRenderers` | `undefined` | Custom renderers for specific node types |
| `plugins` | `RemarkPlugin[]` | `[]` | Remark plugins to use |
| `debug` | `boolean` | `false` | Enable debug logging |
| `maxListDepth` | `number` | `10` | Maximum depth for nested lists |
| `onLinkPress` | `(url: string) => void` | `undefined` | Callback when a link is pressed |
| `onImageError` | `(error: Error) => void` | `undefined` | Callback when an image fails to load |
| `codeHighlighter` | `CodeHighlighterConfig` | `undefined` | Configuration for code syntax highlighting |

### `MarkdownStyles`

Interface for customizing markdown element styles.

```typescript
interface MarkdownStyles {
  heading?: TextStyle;
  heading1?: TextStyle;
  heading2?: TextStyle;<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/1.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/2.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/3.png" />
<img width="200" alt="Image" src="https://raw.githubusercontent.com/BANG88/react-native-markdown/main/screenshots/4.png" />
</div>
  heading3?: TextStyle;
  heading4?: TextStyle;
  heading5?: TextStyle;
  heading6?: TextStyle;
  paragraph?: TextStyle;
  text?: TextStyle;
  strong?: TextStyle;
  emphasis?: TextStyle;
  code?: TextStyle;
  codeBlock?: ViewStyle & { container?: ViewStyle };
  inlineCode?: TextStyle;
  link?: TextStyle;
  image?: ImageStyle;
  list?: ViewStyle;
  listItem?: ViewStyle;
  orderedList?: ViewStyle;
  unorderedList?: ViewStyle;
  blockquote?: ViewStyle & { text?: TextStyle };
  horizontalRule?: ViewStyle;
}
```

### `useMarkdown` Hook

Hook for parsing markdown asynchronously.

```typescript
const { ast, error, isLoading } = useMarkdown(markdown, plugins);
```

### `useMarkdownStyles` Hook

Hook for merging custom styles with defaults.

```typescript
const styles = useMarkdownStyles(customStyles);
```

## Extending with Plugins

This package supports the full remark plugin ecosystem. Here are some popular plugins:

- [remark-gfm](https://github.com/remarkjs/remark-gfm) - GitHub Flavored Markdown
- [remark-math](https://github.com/remarkjs/remark-math) - Math support
- [remark-breaks](https://github.com/remarkjs/remark-breaks) - Hard line breaks
- [remark-frontmatter](https://github.com/remarkjs/remark-frontmatter) - Frontmatter support

Example:

```tsx
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';

<MarkdownView plugins={[{ plugin: remarkGfm }, { plugin: remarkMath }]}>
  {markdownContent}
</MarkdownView>
```

## Creating Custom Renderers

You can create custom renderers for any node type:

```typescript
import type { NodeRenderer } from '@hake/react-native-markdown';
import type { Code } from 'mdast';
import { Text } from 'react-native';

const myCodeRenderer: NodeRenderer<Code> = (node, children, context) => {
  return (
    <Text style={context.styles.code}>
      {node.value}
    </Text>
  );
};

<MarkdownView renderers={{ code: myCodeRenderer }}>
  {markdownContent}
</MarkdownView>
```

## TypeScript Support

This package is written in TypeScript and includes full type definitions. All types are exported for use in your code:

```typescript
import type {
  MarkdownViewProps,
  MarkdownStyles,
  CustomRenderers,
  RemarkPlugin,
  NodeRenderer,
} from '@hake/react-native-markdown';
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT