Skip to content

README.md

Latest commit

 

History

History
102 lines (74 loc) · 2.92 KB

README.md

File metadata and controls

102 lines (74 loc) · 2.92 KB

@nstudio/nativescript-rich-paste

Rich paste and drag-and-drop support for NativeScript text inputs. Handles images, GIFs, files, and text from the clipboard.

npm install @nstudio/nativescript-rich-paste

Compatible with Angular, React, Solid, Svelte and Vue.

Drop-in replacements for TextField and TextView which work identical but with enhanced rich paste features. Just append RichPaste to the end of the element name and register it in your framework of choice.

Usage

<Page xmlns:pi="@nstudio/nativescript-rich-paste">
  <pi:TextFieldRichPaste accept="all" hint="Paste rich data..." paste="{{ onPaste }}" />
</Page>
import { PasteEventData } from '@nstudio/nativescript-rich-paste';

onPaste(args: PasteEventData) {
  const payload = args.data;
  switch (payload.type) {
    case 'text':
      console.log('Text:', payload.value);
      break;
    case 'images':
      payload.items.forEach((img) => {
        console.log(img.uri, img.mimeType, img.animated);
      });
      break;
    case 'files':
      payload.items.forEach((file) => {
        console.log(file.name, file.mimeType, file.size);
      });
      break;
  }
}

Other Flavors

Angular

import { registerElement } from '@nativescript/angular';
import { TextFieldRichPaste, TextViewRichPaste } from '@nstudio/nativescript-rich-paste';

registerElement('TextFieldRichPaste', () => TextFieldRichPaste);
registerElement('TextViewRichPaste', () => TextViewRichPaste);

React

import { registerElement } from 'react-nativescript';
import { TextFieldRichPaste, TextViewRichPaste } from '@nstudio/nativescript-rich-paste';

registerElement('textFieldRichPaste', () => TextFieldRichPaste);
registerElement('textViewRichPaste', () => TextViewRichPaste);

Solid

import { registerElement } from 'dominative';
import { TextFieldRichPaste, TextViewRichPaste } from '@nstudio/nativescript-rich-paste';

registerElement('textFieldRichPaste', TextFieldRichPaste);
registerElement('textViewRichPaste', TextViewRichPaste);

Svelte

import { registerNativeViewElement } from '@nativescript-community/svelte-native/dom';
import { TextFieldRichPaste, TextViewRichPaste } from '@nstudio/nativescript-rich-paste';

registerNativeViewElement('textFieldRichPaste', () => TextFieldRichPaste);
registerNativeViewElement('textViewRichPaste', () => TextViewRichPaste);

Vue

import { registerElement } from 'nativescript-vue';
import { TextFieldRichPaste, TextViewRichPaste } from '@nstudio/nativescript-rich-paste';

registerElement('TextFieldRichPaste', () => TextFieldRichPaste);
registerElement('TextViewRichPaste', () => TextViewRichPaste);

Docs

https://plugins.nstudio.io/plugins/rich-paste

License

Apache License Version 2.0