react-editext
v6.0.0
Published
Editable Text Component for React Applications
Downloads
15,620
Maintainers
Readme
react-editext
Editable Text Component for React Applications
This project is generated from react-typescript-library template.
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] |
| 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 |
| 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 | | deprecated
. 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
. |
| 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 |
| 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 <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 |
| ---------------------- | -------------------------------------------------------------------------------- |
| 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:
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.
Browser Support
| Chrome | Firefox | Safari | iOS Safari | Opera | Edge | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
Development
With Nix
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.
yarn install
yarn start
Navigate to example/
folder and repeat the above steps.
cd example
yarn install
yarn start
Now open http://localhost:3000/ in your browser.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT © alioguzhan