React native rich text editor 10tap

TenTap is a typed, easy to use, customizable, and extendable Rich Text editor for React-Native based on Tiptap and Prosemirror. It offers a "plug and play" experience and comes with many essential features out of the box that can be incorporated into your apps quickly. Additionally, TenTap allows you the developers to tailor the editor to your applications specific needs.

Features

• 💁 Based on tiptap
• ➕ Extendable
• ⚙️ Support dynamic scheme
• 🛠️ Native toolbar
• 💅 Customizable styles
• 🌒 Darkmode and custom theme support
• 🏗️ supports new architecture*

* new arch supported on react-native version 0.73.5 and above

Why?

After years of developing rich text editors for mobile, we realized that there is an empty void for open source RichText editors on mobile especially for ReactNative. So we have decided to create this package that incorporates all that we have learned, and that provides the best possible ux. Tentap is designed for getting the best experience of editing rich-text on mobile inspired by state of the art mobile editors like: gdocs, notion, dropbox paper.

Docs and Examples

Click Here For Full Documentation

Installation

React Native

1. yarn add @10play/tentap-editor react-native-webview
2. cd ios && pod install

Expo

npx expo install @10play/tentap-editor react-native-webview
Only basic usage is supported by Expo Go (see basic example).
Otherwise you will need to setup Expo Dev Client.

Now you ready to add tentap to your app!

Expo Web

TenTap supports expo web! See setup here

Usage

import React from 'react';
import {
  SafeAreaView,
  View,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
} from 'react-native';
import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';

export const Basic = () => {
  const editor = useEditorBridge({
    autofocus: true,
    avoidIosKeyboard: true,
    initialContent: 'Start editing!',
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{
          position: 'absolute',
          width: '100%',
          bottom: 0,
        }}
      >
        <Toolbar editor={editor} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library