react-click-to-edit

A simple wrapper component make any text editable.

Usage no npm install needed!

<script type="module">
  import reactClickToEdit from 'https://cdn.skypack.dev/react-click-to-edit';
</script>

README

React-Click-To-Edit

Add it to your component including text such as label, article and table and make the text editable.

Installation

$ npm install react-click-to-edit
or
$ yarn add react-click-to-edit

Usage

// ESM
import CTE from "react-click-to-edit";
or;
// Commonjs
const CTE = require("react-click-to-edit");
props type usage
wrapperClass string css class applied to the wrapper (or container) consists of input and text
inputClass string css class applied to the input
textClass string css class applied to the text
initialValue string initial value of text
startEditing () => {} callback invoked when entering edit mode by clicking the text
endEditing (value) => {} callback invoked when leaving edit mode by clicking ENTER or ESC

See elaborate examples

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT