- ×
Editable Text Component for React Apps
Filed under formsShow Allreact-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
andinputProps
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
orclassName
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 returntrue
orfalse
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
andinputProps
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 hereeditContainerClassName string No Custom class name for the container in edit mode. Will be set to viewContainerClassName
if you set it and omit this. See heremainContainerClassName string No deprecated
. Custom class name for the top-level main container. See herehideIcons 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 heresubmitOnEnter bool No false
Set it to true
if you want to submit the form whenEnter
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 whenEscape
is pressed. See herecancelOnUnfocus bool No false
Set it to true
if you want to cancel the form when clicked outside of the input. See heresubmitOnUnfocus bool No false
Set it to true
if you want to submit the form when clicked outside of the input. See herestartEditingOnFocus 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 heretabIndex number No An helper shortcut in case you want to pass the same tabIndex to both viewProps
andinputProps
.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 returnsfalse
the input will be read-only.Styling with
styled-components
You can style your
<EdiText/>
components withstyled-components
or similar libraries. You can either target internal HTML elements by theirtype
( ororder
) , 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
modeedit-container
the container in edit
modebutton-container
the container for the save
andcancel
buttonsvalidation-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