@mumot1999/react-editext
v3.17.1
Published
Editable Text Component for React Applications
Downloads
6
Maintainers
Readme
react-editext
Editable Text Component for React Applications
Install
npm install --save react-editext
Or with yarn:
yarn add react-editext
Usage
EdiText is highly customizable. You can see more examples here. Here is a basic usage:
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 (
<div className="container">
<EdiText
type="text"
value={value}
onSave={handleSave}
/>
</div>
)
}
There is also a codesandbox template that you can fork and play with it:
You can customize almost everything based on your needs. Please navigate to 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] |
| type | string | Yes | 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. |
| onSave | function | Yes | | Function will be called when save button clicked. value
and inputProps
are passed to cb. |
| 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
|
| 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 |
| 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 |
| mainContainerClassName | string | No | | Custom class name for the top-level main container. See here |
| 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. |
| 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 |
| 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 |
| 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 <EdiText/>
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 |
| cancelOnUnfocus | bool | No | false
| Set it to true
if you want to cancel the form when clicked outside of the input. See here |
| submitOnUnfocus | bool | No | false
| Set it to true
if you want to submit the form when clicked outside of the input. See here |
| startEditingOnFocus | bool | No | false
| Activates the edit mode when the view container is in focus. See here |
| startEditingOnEnter | bool | No | false
| Activates the edit mode when the Enter
key is pressed. See here |
| tabIndex | number | No | | An helper shortcut in case you want to pass the same tabIndex to both viewProps
and inputProps
. |
Styling with styled-components
You can style your <EdiText/>
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 |
| ------------------ | -------------------------------------------------------------------------------- |
| view-container
| the container in view
mode |
| edit-container
| the container in edit
mode |
| button-container
| the container for the save
and cancel
buttons |
| 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:
button[editext="cancel-button"] {
&:hover {
background: crimson;
color: #fff;
}
}
div[editext="view-container"] {
background: #6293C3;
padding: 15px;
border-radius: 5px;
color: #fff;
}
input, textarea { /** or input[editext="input"] {} */
background: #1D2225;
color: #F4C361;
font-weight: bold;
border-radius: 5px;
}
See the example code.
Browser Support
| Chrome | Firefox | Safari | iOS Safari | Opera | IE / Edge | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: :exclamation: |
rows
prop for textarea has no effect in IE/Edge. You can set itsheight
with some css.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT © alioguzhan