A draggable and resizable text editor for React Native.
Install & Import:
# NPM $ npm i react-native-drag-text-editor --save
import React, { Component } from "react"; import {Dimensions} from "react-native"; import DragTextEditor from 'react-native-drag-text-editor';
Basic Usage:
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")} /> } ) }
Default component props and event handlers:
x: 0, y: 0, w: 200, h: 200, minWidth: 200, minHeight: 200, windowBorder: { x: 0, y: 0, w: Dimensions.get('window').width, h: Dimensions.get('window').height, }, centerPress:null, TopLeftAction:null, TopRightAction:null, TopLeftIcon:null, TopRightIcon:null, FontFamily:null, LetterSpacing:0, FontColor:"black", FontSize:15, BackgroundColor:"transparent", TextAlign:"center", LineHeight:18, isDraggable: true, isResizable: true, onDragStart: null, onDrag: null, onDragEnd: null, onResizeStart: null, onResize: null, onResizeEnd: null,
Preview:
Download Details:
Author: eneskarpuz
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/eneskarpuz/react-native-drag-text-editor
License: MIT