react-edit-text

React Edit Text

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

Made with ❤️ by Brian Min

Demo

Feel free to check out the live demo

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

Contributing

Contributions are very much appreciated and welcome. Please refer to the contributing guidelines for more details.

License

MIT © Brian Min

Changelog

4.0.0 (2021-02-19)

Features

• add previousValue field to onSave callback response (3057b92)
• move cursor to end of text on focus (3fde4bd)

BREAKING CHANGES

• fix handleBlur to correctly revert changes when escape key is pressed