❤
npm
Sign UpSign In

react-native-wysiwyg

0.0.1 • Public • Published

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

View on Expo Snack

Installation

yarn add react-native-wysiwyg

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

Usage
import { Editor, Toolbar, convertToRaw } from "react-native-wysiwyg";
import { KeyboardAwareView } from "react-native-keyboard-aware-view"
<KeyboardAwareView keyboardShouldPersistTaps animated>
  <Editor data={data} onChange={(data) => { console.log(data) }} />
  <Toolbar />
</KeyboardAwareView>

data is either Draft.js contentState

Pass data to editor

const data = convertToRaw(draftjsData)

Catch editor state change event

 
  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

  • Convert from Draft.js contentState
  • Convert to Draft.js contentState
  • Convert from Markdown
  • Convert to Markdown
  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Move line up & down
  • Bullets (Unordered List)
  • Numbered List (Ordered List)
  • Blockquote
  • Heading 1
  • Heading 2
  • 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

Readme

Keywords

Package Sidebar

Install

npm i react-native-wysiwyg

Repository

github.com/shakogegia/react-native-wysiwyg

Homepage

github.com/shakogegia/react-native-wysiwyg#readme

Weekly Downloads

5

Version

0.0.1

License

ISC

Unpacked Size

1.13 MB

Total Files

13

Last publish

Collaborators

  • shakogegia
Try on RunKit
Report malware