https://github.com/alioguzhan/react-editext
Editable Text Component for React Apps
https://github.com/alioguzhan/react-editext
editable editext react text-editor
Last synced: 7 months ago
JSON representation
Editable Text Component for React Apps
- Host: GitHub
- URL: https://github.com/alioguzhan/react-editext
- Owner: alioguzhan
- License: mit
- Created: 2018-06-24T19:45:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-04-08T20:51:43.000Z (9 months ago)
- Last Synced: 2025-04-15T01:58:12.089Z (8 months ago)
- Topics: editable, editext, react, text-editor
- Language: TypeScript
- Homepage: https://alioguzhan.github.io/react-editext/
- Size: 4.44 MB
- Stars: 300
- Watchers: 3
- Forks: 38
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
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. |
| 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)):
jdoklovic
π»
Obed Castillo
π»
Bruno Aderaldo
π π»
Sascha Kiefer
π¬ π€
Ehab Alsharif
π» π
Harsha N Hegde
π π»
Justin Kuntz
π€ π
Braulio Soncco
π€
zig
π
Isaiah Taylor
π€
anz000
π€
Amir M
π€
Harshil Parmar
π
Brandon Paris
π
Christopher Schaub
π€
Krzysztof Danek
π
Pavel Kalashnikov
π
JΓ‘n BoΔΓnec
π
shubh057
π€
Sachin Jain
π
SeYeD Sina
π€
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)