# react-native-wysiwyg

> Rich text editor for React Native

Latest version **0.0.1** (published 2020-11-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-wysiwyg
pnpm add react-native-wysiwyg
yarn add react-native-wysiwyg
bun add react-native-wysiwyg
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-11-24 |
| First published | 2020-11-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | shalva.gegia@gmail.com |
| Maintainers | shakogegia |
| Keywords | react-native, text-editor |

## Links

- npm: https://www.npmjs.com/package/react-native-wysiwyg
- Repository: https://github.com/shakogegia/react-native-wysiwyg
- Homepage: https://github.com/shakogegia/react-native-wysiwyg#readme
- Issues: https://github.com/shakogegia/react-native-wysiwyg/issues
- npm.io page: https://npm.io/package/react-native-wysiwyg

## Dependencies (7)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [shortid](https://npm.io/package/shortid.md) ^2.2.14
- [fbemitter](https://npm.io/package/fbemitter.md) ^2.1.1
- [native-base](https://npm.io/package/native-base.md) ^2.12.1
- [@expo/vector-icons](https://npm.io/package/@expo/vector-icons.md) ^10.0.1
- [reactotron-react-native](https://npm.io/package/reactotron-react-native.md) ^3.4.1
- [react-native-keyboard-aware-view](https://npm.io/package/react-native-keyboard-aware-view.md) ^0.0.14

## Recent versions

- 0.0.1 (latest) — 2020-11-24

## README

# React Native WYSIWYG

React Native Rich text editor for iOS & Android

Supports Draft.js (markdown support coming soon)

Can be used with **Expo**

![React Native WYSIWYG](./demo.gif)

### Demo

View on [Expo Snack](https://snack.expo.io/@shakogegia/react-native-wysiwyg)


### Installation

```bash
yarn add react-native-wysiwyg
```

this library also required `react-native-keyboard-aware-view` to  be installed

##### Usage

```js
import { Editor, Toolbar, convertToRaw } from "react-native-wysiwyg";
import { KeyboardAwareView } from "react-native-keyboard-aware-view"
```

```jsx
<KeyboardAwareView keyboardShouldPersistTaps animated>
  <Editor data={data} onChange={(data) => { console.log(data) }} />
  <Toolbar />
</KeyboardAwareView>
```

`data` is either Draft.js contentState

Pass data to editor

```js
const data = convertToRaw(draftjsData)
```

Catch editor state change event

```js

  onChange = (data) => {
    console.log(data)
  }
```

#### Props


| Name | Type | Default | Desc
| ------------- | ------------- | -----| ----- |
| `data` | string | - | Editor State |
| `onChange` | function | - | Callback for on editor state change |
| `onFocus` | function({ index, contentState }) | - | Callback for on onFocus |
| `onBlur` | function({ index, contentState }) | - | Callback for on onBlur |


### To Do

- [x] Convert from Draft.js contentState
- [x] Convert to Draft.js contentState
- [ ] Convert from Markdown
- [ ] Convert to Markdown
- [x] Bold
- [x] Italic
- [x] Underline
- [x] Strikethrough
- [x] Move line up & down
- [x] Bullets (Unordered List)
- [x] Numbered List (Ordered List)
- [x] Blockquote
- [x] Heading 1
- [x] Heading 2
- [x] Heading 3
- [ ] Font colors
- [ ] Links
- [ ] Code
- [ ] Tables
- [ ] images
- [ ] Line Breaks
- [ ] Change tab intends
- [ ] Justify text position
- [ ] Custom default styles

### Credits
Many thanks to awesome plugin `react-native-keyboard-aware-view` from @APSL

Inspired by Notion mobile app

### Contribution

Contribution are more than welcomed

---
_Source: https://npm.io/package/react-native-wysiwyg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._