# react-editext
> Editable Text Component for React Applications
Latest version **7.1.0** (published 2025-07-27) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-editext
pnpm add react-editext
yarn add react-editext
bun add react-editext
```
## Health
**Score 50/100 (C)** — status: stable.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: stale.
## Facts
| | |
|---|---|
| Version | 7.1.0 |
| Published | 2025-07-27 |
| First published | 2018-09-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 186.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 307 |
| Author | alioguzhan |
| Maintainers | ali_oguzhan |
| Keywords | react, editable, editable text, editable content, contenteditable, content editable, inline edit |
## Links
- npm: https://www.npmjs.com/package/react-editext
- Repository: https://github.com/alioguzhan/react-editext
- npm.io page: https://npm.io/package/react-editext
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 7.1.0 (latest) — 2025-07-27
- 7.0.0 — 2024-12-30
- 6.0.0 — 2023-03-25
- 5.1.0 — 2022-10-31
- 5.0.2 — 2022-09-06
- 5.0.1 — 2022-09-06
- 5.0.0 — 2022-07-14
- 4.2.1 — 2021-09-30
- 4.2.0 — 2021-08-23
- 4.1.5 — 2021-05-17
- 4.1.4 — 2021-05-13
- 4.1.3 — 2021-05-12
- 4.1.2 — 2021-05-12
- 4.1.1 — 2021-05-04
- 4.1.0 — 2021-05-04
- … 49 more at https://npm.io/package/react-editext/versions
## README
[](https://freepalestine.dev)
# react-editext
> Editable Text Component for React Applications
[](https://www.npmjs.com/package/react-editext)
[](https://www.npmjs.com/package/react-editext)
[](https://github.com/alioguzhan/react-editext/actions)
[](https://codecov.io/gh/alioguzhan/react-editext)
[](https://freepalestine.dev)
This project is generated from [react-typescript-library template](https://github.com/alioguzhan/react-typescript-library).
## Install
```bash
npm install --save react-editext
```
Or with yarn:
```bash
yarn add react-editext
```
## Usage
EdiText is highly customizable. You can see more examples [here](https://alioguzhan.github.io/react-editext/). Here is a basic usage:
```jsx
import React, { useState } from 'react';
import EdiText from 'react-editext';
function Example(props) {
const [value, setValue] = useState('What is real? How do you define real?');
const handleSave = (val) => {
console.log('Edited Value -> ', val);
setValue(val);
};
return (
);
}
```
There is also a codesandbox template that you can fork and play with it:
[](https://stackblitz.com/edit/react-editext?file=src%2FApp.tsx)
You can customize almost everything based on your needs. Please navigate to [Props](#Props) section. I mean, just scroll down.
## Props
| Prop | Type | Required | Default | Note |
| ---------------------- | ------------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| value | string | **Yes** | | Value of the content and input [in edit mode] |
| onSave | function | **Yes** | | Function will be called when save button clicked. `value` and `inputProps` are passed to cb. |
| type | string | No | text | Input type. Possible options are: `text`, `password`, `number`, `email`, `textarea`, `date`, `datetime-local`, `time`, `month`, `url`, `week`, `tel` |
| hint | node | No | `''` | A simple hint message appears at the bottom of input element. Any valid element is allowed. |
| inputProps | object | No | | Props to be passed to input element. Any kind of valid DOM attributes are welcome. |
| viewProps | object | No | | Props to be passed to div element that shows the text. You can specify your own `styles` or `className` |
| containerProps | object | No | | Props to be passed to div element that is container for all elements. You can use this if you want to style or select the whole container. |
| buttonsContainerProps | object | No | | Props to be passed to div element that contains action buttons. You can use this if you want to style or select the buttons container. |
| editButtonProps | object | No | | Props to be passed to edit button. |
| validation | function | No | | Pass your own validation function. takes one param -> `value`. It must return `true` or `false` |
| validationMessage | node | No | Invalid Value | If validation fails this message will appear |
| onValidationFail | function | No | | Pass your own function to track when validation failed. See Examples page for the usage. |
| onCancel | function | No | | Function will be called when editing is cancelled. `value` and `inputProps` are passed as params. |
| saveButtonContent | node | No | `''` | Content for save button. Any valid element is allowed. Default is: ✓ |
| cancelButtonContent | node | No | `''` | Content for cancel button. Any valid element is allowed. Default is: ✕ |
| editButtonContent | node | No | `''` | Content for edit button. Any valid element is allowed. Default is: ✎ |
| saveButtonClassName | string | No | | Custom class name for save button. |
| cancelButtonClassName | string | No | | Custom class name for cancel button. |
| editButtonClassName | string | No | | Custom class name for edit button. |
| viewContainerClassName | string | No | | Custom class name for the container in `view` mode.[See here](https://alioguzhan.github.io/react-editext/#custom-classes-for-containers) |
| editContainerClassName | string | No | | Custom class name for the container in edit mode. Will be set to `viewContainerClassName` if you set it and omit this. See [here](https://alioguzhan.github.io/react-editext/#custom-classes-for-containers) |
| hideIcons | bool | No | `false` | Set it to `true` if you don't want to see default icons on action buttons. See Examples page for more details. |
| buttonsAlign | string | No | `after` | Set this to `before` if you want to locate action buttons before the input instead of after it. See [here](https://alioguzhan.github.io/react-editext/#change-buttons-location). |
| editOnViewClick | bool | No | `false` | Set it to `true` if you want clicking on the view to activate the editor. |
| editing | bool | No | `false` | Set it to `true` if you want the view state to be edit mode. |
| onEditingStart | function | No | | Function that will be called when the editing mode is active. See [here](https://alioguzhan.github.io/react-editext/#events) |
| showButtonsOnHover | bool | No | `false` | Set it to `true` if you want to display action buttons **only** when the text hovered by the user. See [here](https://alioguzhan.github.io/react-editext/#show-on-hover) |
| submitOnEnter | bool | No | `false` | Set it to `true` if you want to submit the form when `Enter` is pressed. **Be careful if you have multiple instances of `` on the same page.** |
| cancelOnEscape | bool | No | `false` | Set it to `true` if you want to cancel the form when `Escape` is pressed. See [here](https://alioguzhan.github.io/react-editext/#save-on-enter) |
| cancelOnUnfocus | bool | No | `false` | Set it to `true` if you want to cancel the form when clicked outside of the input. See [here](https://alioguzhan.github.io/react-editext/#cancel-on-blur) |
| submitOnUnfocus | bool | No | `false` | Set it to `true` if you want to submit the form when clicked outside of the input. See [here](https://alioguzhan.github.io/react-editext/#submit-on-blur) |
| startEditingOnFocus | bool | No | `false` | Activates the edit mode when the view container is in focus. See [here](https://alioguzhan.github.io/react-editext/#edit-on-focus) |
| startEditingOnEnter | bool | No | `false` | Activates the edit mode when the `Enter` key is pressed. See [here](https://alioguzhan.github.io/react-editext/#edit-on-enter) |
| tabIndex | number | No | | An helper shortcut in case you want to pass the same tabIndex to both `viewProps` and `inputProps`. |
| renderValue | function | No | | Custom render method for the content in the view mode.Use this prop to customize the displayed value in view mode. [See here](https://alioguzhan.github.io/react-editext#render-value) |
| canEdit | function or boolean | No | `true` | A function or boolean prop that returns a boolean. If it returns `true` the input will be editable. If it returns `false` the input will be read-only. |
## Styling with `styled-components`
You can style your `` components with `styled-components` or similar libraries. You can either target internal HTML elements by their `type` ( or `order`) , or you can select them by attribute values.
Each customizable HTML element has a `editext=xxx` attribute. Use below as a reference table:
| Attr. Value | Description |
| ---------------------- | -------------------------------------------------------------------------------- |
| `main-container` | the main container |
| `view-container` | the container in `view` mode |
| `edit-container` | the container in `edit` mode |
| `button-container` | the container for the `save` and `cancel` buttons |
| `validation-container` | the container for validation message area |
| `edit-button` | use this to style the **edit button** |
| `save-button` | use this to style the **save button** |
| `cancel-button` | use this to style the **cancel button** |
| `input` | There is only one input. You can select it directly or just use this attr value. |
| `hint` | To style the hint container. |
Usage:
```css
button[editext='cancel-button'] {
&:hover {
background: crimson;
color: #fff;
}
}
div[editext='view-container'] {
background: #6293c3;
padding: 15px;
border-radius: 5px;
color: #fff;
}
div[editext='validation-container'] {
color: #d3d3d3;
text-decoration: underline;
}
input,
textarea {
/** or input[editext="input"] {} */
background: #1d2225;
color: #f4c361;
font-weight: bold;
border-radius: 5px;
}
```
> See [the example code](https://alioguzhan.github.io/react-editext/#styled-components).
## Browser Support
| [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS Safari | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Edge |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
## Development
### With Nix
```bash
nix-shell --pure
develop
```
This will start a tmux session for both library and example app.
### Without Nix
Install dependencies and start the rollup watch process.
```bash
yarn install
yarn start
```
Navigate to `example/` folder and repeat the above steps.
```bash
cd example
yarn install
yarn start
```
Now open [http://localhost:3000/](http://localhost:3000/) in your browser.
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## License
MIT © [alioguzhan](https://github.com/alioguzhan)
---
_Source: https://npm.io/package/react-editext · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
