text

Editable Text Component for React Apps

Sep 30, 2019
Editable Text Component for React Apps

react-editext

Editable Text Component for React Applications.

View demo View Github

Install

npm install --save react-editext

Or with yarn:

yarn add react-editext

Usage

EdiText is highly customizable. You can see more examples here. Here is a basic usage:

import React, { Component } from 'react' import EdiText from 'react-editext' class Example extends Component { onSave = val => { console.log('Edited Value -> ', val) } render () { return ( <div className="container"> <EdiText type="text" value='What is real? How do you define real?' onSave={this.onSave} /> </div> ) } }

You can customize almost everything based on your needs. Please navigate to Props section. I mean, just scroll down.

Props

PropTypeRequiredDefaultNote
valuestringYes''Value of the content and input [in edit mode]
typestringYestextInput type. Possible options are: text, number, email, textarea, date, datetime-local, time, month, url, week, tel
hintnodeNo''A simple hint message appears at the bottom of input element. Any valid element is allowed.
onSavefunctionYesFunction will be called when save button clicked. value is passed to cb.
inputPropsobjectNoProps to be passed to input element. Any kind of valid DOM attributes are welcome.
viewPropsobjectNoProps to be passed to div element that shows the text. You can specify your own styles or className
validationfunctionNoPass your own validation function. takes one param -> value. It must return true or false
validationMessagenodeNoInvalid ValueIf validation fails this message will appear
onValidationFailfunctionNoPass your own function to track when validation failed. See Examples page for the usage.
onCancelfunctionNoFunction will be called when editing is cancelled.
saveButtonContentnodeNo''Content for save button. Any valid element is allowed. Default is: ✓
cancelButtonContentnodeNo''Content for cancel button. Any valid element is allowed. Default is: ✕
editButtonContentnodeNo''Content for edit button. Any valid element is allowed. Default is: ✎
saveButtonClassNamestringNoCustom class name for save button.
cancelButtonClassNamestringNoCustom class name for cancel button.
editButtonClassNamestringNoCustom class name for edit button.
viewContainerClassNamestringNoCustom class name for the container in view mode.See here
editContainerClassNamestringNoCustom class name for the container in edit mode. Will be set to viewContainerClassName if you set it and omit this. See here
mainContainerClassNamestringNoCustom class name for the top-level main container. See here
hideIconsboolNofalseSet it to true if you don't want to see default icons on action buttons. See Examples page for more details.
buttonsAlignstringNoafterSet this to before if you want to locate action buttons before the input instead of after it. See here.
editOnViewClickboolNofalseSet it to true if you want clicking on the view to activate the editor.
editingboolNofalseSet it to true if you want the view state to be edit mode.
onEditingStartfunctionNoFunction that will be called when the editing mode is active. See here

GitHub

Recommended