Awesome
<div align="center"> <img src="./logo.png" alt="react-editext" width="200" /> </div>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
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):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center"><a href="https://github.com/jdoklovic"><img src="https://avatars2.githubusercontent.com/u/620106?v=4?s=100" width="100px;" alt="jdoklovic"/><br /><sub><b>jdoklovic</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/commits?author=jdoklovic" title="Code">π»</a></td> <td align="center"><a href="https://github.com/wesoft-systems"><img src="https://avatars3.githubusercontent.com/u/8137662?v=4?s=100" width="100px;" alt="Obed Castillo"/><br /><sub><b>Obed Castillo</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/commits?author=wesoft-systems" title="Code">π»</a></td> <td align="center"><a href="https://brunoaderaldo.netlify.com/"><img src="https://avatars3.githubusercontent.com/u/14007590?v=4?s=100" width="100px;" alt="Bruno Aderaldo"/><br /><sub><b>Bruno Aderaldo</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/issues?q=author%3ABrunoAderaldo" title="Bug reports">π</a> <a href="https://github.com/alioguzhan/react-editext/commits?author=BrunoAderaldo" title="Code">π»</a></td> <td align="center"><a href="https://github.com/esskar"><img src="https://avatars1.githubusercontent.com/u/65206?v=4?s=100" width="100px;" alt="Sascha Kiefer"/><br /><sub><b>Sascha Kiefer</b></sub></a><br /><a href="#question-esskar" title="Answering Questions">π¬</a> <a href="#ideas-esskar" title="Ideas, Planning, & Feedback">π€</a></td> <td align="center"><a href="https://github.com/sanehab"><img src="https://avatars0.githubusercontent.com/u/36003641?v=4?s=100" width="100px;" alt="Ehab Alsharif"/><br /><sub><b>Ehab Alsharif</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/commits?author=sanehab" title="Code">π»</a> <a href="https://github.com/alioguzhan/react-editext/commits?author=sanehab" title="Documentation">π</a></td> <td align="center"><a href="http://agiliti.in"><img src="https://avatars3.githubusercontent.com/u/4962589?v=4?s=100" width="100px;" alt="Harsha N Hegde"/><br /><sub><b>Harsha N Hegde</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/issues?q=author%3Ahnhegde" title="Bug reports">π</a> <a href="https://github.com/alioguzhan/react-editext/commits?author=hnhegde" title="Code">π»</a></td> <td align="center"><a href="http://www.creativesoapbox.com"><img src="https://avatars1.githubusercontent.com/u/940266?v=4?s=100" width="100px;" alt="Justin Kuntz"/><br /><sub><b>Justin Kuntz</b></sub></a><br /><a href="#ideas-justinkuntz" title="Ideas, Planning, & Feedback">π€</a> <a href="https://github.com/alioguzhan/react-editext/issues?q=author%3Ajustinkuntz" title="Bug reports">π</a></td> </tr> <tr> <td align="center"><a href="http://soncco.com"><img src="https://avatars0.githubusercontent.com/u/1321736?v=4?s=100" width="100px;" alt="Braulio Soncco"/><br /><sub><b>Braulio Soncco</b></sub></a><br /><a href="#ideas-soncco" title="Ideas, Planning, & Feedback">π€</a></td> <td align="center"><a href="https://github.com/zig"><img src="https://avatars3.githubusercontent.com/u/85303?v=4?s=100" width="100px;" alt="zig"/><br /><sub><b>zig</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/issues?q=author%3Azig" title="Bug reports">π</a></td> <td align="center"><a href="https://github.com/isaiahtaylor"><img src="https://avatars1.githubusercontent.com/u/57509275?v=4?s=100" width="100px;" alt="Isaiah Taylor"/><br /><sub><b>Isaiah Taylor</b></sub></a><br /><a href="#ideas-isaiahtaylor" title="Ideas, Planning, & Feedback">π€</a></td> <td align="center"><a href="https://github.com/anz000"><img src="https://avatars2.githubusercontent.com/u/12726957?v=4?s=100" width="100px;" alt="anz000"/><br /><sub><b>anz000</b></sub></a><br /><a href="#ideas-anz000" title="Ideas, Planning, & Feedback">π€</a></td> <td align="center"><a href="https://github.com/amirmishani"><img src="https://avatars0.githubusercontent.com/u/11446580?v=4?s=100" width="100px;" alt="Amir M"/><br /><sub><b>Amir M</b></sub></a><br /><a href="#ideas-amirmishani" title="Ideas, Planning, & Feedback">π€</a></td> <td align="center"><a href="https://github.com/harshilparmar"><img src="https://avatars3.githubusercontent.com/u/45915468?v=4?s=100" width="100px;" alt="Harshil Parmar"/><br /><sub><b>Harshil Parmar</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/commits?author=harshilparmar" title="Documentation">π</a></td> <td align="center"><a href="http://brandonbits.com"><img src="https://avatars.githubusercontent.com/u/17344791?v=4?s=100" width="100px;" alt="Brandon Paris"/><br /><sub><b>Brandon Paris</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/issues?q=author%3Abrandonparis" title="Bug reports">π</a></td> </tr> <tr> <td align="center"><a href="https://chris.schaub.com"><img src="https://avatars.githubusercontent.com/u/3321008?v=4?s=100" width="100px;" alt="Christopher Schaub"/><br /><sub><b>Christopher Schaub</b></sub></a><br /><a href="#ideas-chrisschaub" title="Ideas, Planning, & Feedback">π€</a></td> <td align="center"><a href="https://krzysztofdanek.pl"><img src="https://avatars.githubusercontent.com/u/1758834?v=4?s=100" width="100px;" alt="Krzysztof Danek"/><br /><sub><b>Krzysztof Danek</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/issues?q=author%3Achrisdanek" title="Bug reports">π</a></td> <td align="center"><a href="http://kalashnikovisme.medium.com"><img src="https://avatars.githubusercontent.com/u/2001025?v=4?s=100" width="100px;" alt="Pavel Kalashnikov"/><br /><sub><b>Pavel Kalashnikov</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/issues?q=author%3Akalashnikovisme" title="Bug reports">π</a></td> <td align="center"><a href="http://bocinec.sk"><img src="https://avatars.githubusercontent.com/u/169748?v=4?s=100" width="100px;" alt="JΓ‘n BoΔΓnec"/><br /><sub><b>JΓ‘n BoΔΓnec</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/issues?q=author%3Ajohnnypea" title="Bug reports">π</a></td> <td align="center"><a href="https://github.com/shubh057"><img src="https://avatars.githubusercontent.com/u/83571748?v=4?s=100" width="100px;" alt="shubh057"/><br /><sub><b>shubh057</b></sub></a><br /><a href="#ideas-shubh057" title="Ideas, Planning, & Feedback">π€</a></td> <td align="center"><a href="https://github.com/sanjain-progress"><img src="https://avatars.githubusercontent.com/u/90894396?v=4?s=100" width="100px;" alt="Sachin Jain"/><br /><sub><b>Sachin Jain</b></sub></a><br /><a href="https://github.com/alioguzhan/react-editext/issues?q=author%3Asanjain-progress" title="Bug reports">π</a></td> <td align="center"><a href="https://znap.link/seyed-sina"><img src="https://avatars.githubusercontent.com/u/2351721?v=4?s=100" width="100px;" alt="SeYeD Sina"/><br /><sub><b>SeYeD Sina</b></sub></a><br /><a href="#ideas-spostad7" title="Ideas, Planning, & Feedback">π€</a></td> </tr> </tbody> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT Β© alioguzhan