0.0.7 • Published 1 year ago

react-native-drag-text-editor v0.0.7

Weekly downloads
15
License
MIT
Repository
github
Last release
1 year ago

React Native Drag Text Editor

React Native Drag Text Editor is kind a Rich Text Editor still in development for photo editing / manipulation cases.

Showcase IOS13 / AndroidAPI30

Check https://github.com/eneskarpuz/TextEditorPlus for full Example in Readme.

  • Drag and Drop Text
  • Resize Text
  • Edit & Type

Installation

$ npm install react-native-drag-text-editor --save

IOS

  • Don't forget Pods.
$ pod install

Usage

import React, { Component } from "react";
import {Dimensions} from "react-native";
import DragTextEditor from 'react-native-drag-text-editor';
const WINDOW = Dimensions.get('window');

export default class App extends Component {
  constructor(props) {
    super(props);
  };

  render() {
    return (  
        <DragTextEditor
          minWidth={100}
          minHeight={100}
          w={200}
          h={200}
          x={WINDOW.width/4}
          y={WINDOW.height/3}
          FontColor={"#000000"}
          LineHeight={15}
          TextAlign={"left"}
          LetterSpacing={0}
          FontSize={15}
          isDraggable={true}
          isResizable={true}
          TopRightAction={()=>console.log("-Top Right Pressed")}
          centerPress={()=>console.log("-Center Pressed")} 
          onDragStart={()=>console.log("-Drag Started")}
          onDragEnd={()=>console.log("- Drag ended")}
          onDrag={()=>console.log("- Dragging...")}
          onResizeStart={()=>console.log("- Resize Started")}
          onResize={()=>console.log("- Resizing...")}
          onResizeEnd={()=>console.log("- Resize Ended")}
        /> 
  }
 )
}

Properties

PropDefaultTypeDescription
centerPress-functionCenter Pressed handler
TopRightAction-functionTop Right Press handler
TopLeftAction-functionTop Right Press handler
isDraggabletruebooleanDraggable condition
isResizabletruebooleanResizable condition
onDragStart-functionDrag Start event handler
onDrag-functionDrag handler
onDragEnd-functionDrag End event handler
onResizeStart-functionResize Start event handler
onResize-functionResize event handler
onResizeEnd-functionResize End event handler
TopLeftIcon./icons/compassed.pngfunctionClickable Top Left Icon Function Component
TopRightIcon./icons/closed.pngfunctionClickable Top Right Icon Function Component
textLorem Ipsum...StringValue of text
FontFamilyRobotoStringFont Family
FontColor#000StringText Color
FontSize15StringFont Size
LetterSpacing0StringLetter Spacing
BackgroundColortransparentStringBackground Color
TextAlignRobotoStringText Align
LineHeight18StringLine Height
x80StringX location of Components
y150StringY location of Components
w200NumberFirst Width
h200NumberFirst Height
minWidth200NumberMinimum Width
minHeight200NumberMinimum Height

Features

Performs(Visible) in Black and White backgrounds

Logs

To Do

  • Performance Optimization (Code Duplicates etc.)
  • textID and textInAction Bug (Type Error)
  • Dynamic Border Management
  • Add Rotation/Rotate Icon
  • Add Center-Snap

License

This project is licensed under the MIT License.