Skip to main content

10tap-editor

cover MIT License npm

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
  • 🎹 Custom keyboards
  • ⚙️ 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 without custom keyboard 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!

Usage​

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