react-native-text-contextmenu

Custom text contextmenu for react-native using webview in this you could customize everything about your contextmenu without using any native code

Images

Installation

npm install react-native-webview react-native-text-contextmenu

Usage

import * as React from 'react';

import { StyleSheet, View, Dimensions } from 'react-native';
import TextContextmenu from 'react-native-text-contextmenu';

const html = `
<div class="main-content">
<p></p><p>Chapter 1 : Mt. Yellow’s True Monarch and Nine Provinces (1) Group</p><p></p><p>20th May 2019, Monday.</p><p></p><p>At the end of spring and summer’s arrival.</p><p></p><p>This season, the temperature difference between the Jiang Nan region’s day and night was huge. During the day, even if one was wearing shorts he could heat up like a hot dog; yet during the night he had to curl up on his bed, freezing like a cold bird.</p><p></p><p>Jiang Nan University City.</p>
</div>
`

export default function App() {
  const css = `
  .main-content p {
    font-size: 26px;
    line-height: 160%;
    margin-left: 52px;
    margin-right: 42px;
    font-family: Arial, sans-serif, serif;
    background-color: inherit;
    z-index: -9999999999999999999999999;
  }
  .selection-menu {
    font: 12px/100% Roboto, sans-serif;
  }

  .mobile {
    font-size: 20px !important;
    min-height: 30px !important;
    font-weight: bold;
    padding: 14px !important;
    padding-top: 21px !important;   
  }
  `

  return (
    <View style={styles.container}>
      <TextContextmenu minlength={3} value={html} menus={[{
        text: "Copy",
        icon: `<i class="fa fa-eye"></i>`,
        id: "copy"
      },
      {
        text: "Delete",
        icon: `<i class="fa fa-times"></i>`,
        id: "delete"
      },
      {
        text: "Translate",
        icon: `<i class="fa fa-times"></i>`,
        id: "translate"
      }]} maxItems={2} scrollTop={100} selections={[{ text: "the ", color: "red" }]} onSelect={(data, text) => {
        console.log(data, text);
      }} width={Dimensions.get("window").width} height={Dimensions.get("window").height} css={css} />
    </View>
  );
}

Propeties

width*

the width of the webview

height*

the height of the webview

menus*

the contextmenu when the text gets selected

value*

text or html

onSelect*

when a contextmenu gets selected, it include the menu and the selected text

maxItems(optional)

how many items get display in contextmenu and the rest will be included under a collabs button

selections(optional)

select text with its properties eg [{text: "the", color: red}]

onScroll(optional)

when the window gets scrolled, it return scrolltop

css(optional)

style of the page. here you can customize even the selection-menu see the css file for more info

injectedJavaScriptBefore(optional)

inject javascript before the contextmenu gets bind

injectedJavaScriptAfter(optional)

inject javascript after the contextmenu gets bind

minlength(optional)

how much text has to get selected before contextmenu gets displayed default is 1

contextMenuJS(optional)

override the contextmenujs and load your own js file. This is a link eg file:///android_asset/contextMenu.js

click(optional)

When the container gets clicked

scrollTop(optional)

ScrollY Offset

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