A simple editable text component for React

by React

React Edit Text

This is an editable text component for React. Simply click on the text to edit!

View Demo View Github

Install

npm install react-edit-text --save

Type definitions

npm install @types/react-edit-text --save-dev

Usage

Make sure to import the CSS stylesheet before using the component.

import React, { Component } from 'react';

import { EditText, EditTextarea } from 'react-edit-text';
import 'react-edit-text/dist/index.css';

class Example extends Component {
  render() {
    return (
      <div>
        <EditText />
        <EditTextarea />
      </div>
    );
  }
}

Props

Shared props

Prop Type Required Default Description
id string No HTML DOM id attribute
name string No HTML input name attribute
className string No HTML class attribute
value string No Value of the component
defaultValue string No Default value of the component
placeholder string No '' Placeholder value
onSave function No Callback function triggered when input is saved
onChange function No Callback function triggered when input is changed
style object No Sets CSS style of input and view component
readonly bool No false Disables the input and only displays the view component

EditText props

Prop Type Required Default Description
type string No 'text' HTML DOM input text type
inline bool No false Sets inline display

EditTextarea props

Prop Type Required Default Description
rows number No 3 Number of visible rows

GitHub