Home

Awesome

<div align="center"> <img src="./logo.png" alt="react-editext" width="200" /> </div>

FreePalestine.Dev

react-editext

Editable Text Component for React Applications

NPM npm Github codecov Quality Gate Status Github All Contributors FreePalestine.Dev

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:

Edit react-editext-template

You can customize almost everything based on your needs. Please navigate to Props section. I mean, just scroll down.

Props

PropTypeRequiredDefaultNote
valuestringYesValue of the content and input [in edit mode]
onSavefunctionYesFunction will be called when save button clicked. value and inputProps are passed to cb.
typestringNotextInput type. Possible options are: text, password, number, email, textarea, date, datetime-local, time, month, url, week, tel
hintnodeNo''A simple hint message appears at the bottom of input element. Any valid element is allowed.
inputPropsobjectNoProps to be passed to input element. Any kind of valid DOM attributes are welcome.
viewPropsobjectNoProps to be passed to div element that shows the text. You can specify your own styles or className
containerPropsobjectNoProps 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.
editButtonPropsobjectNoProps to be passed to edit button.
validationfunctionNoPass your own validation function. takes one param -> value. It must return true or false
validationMessagenodeNoInvalid ValueIf validation fails this message will appear
onValidationFailfunctionNoPass your own function to track when validation failed. See Examples page for the usage.
onCancelfunctionNoFunction will be called when editing is cancelled. value and inputProps are passed as params.
saveButtonContentnodeNo''Content for save button. Any valid element is allowed. Default is: βœ“
cancelButtonContentnodeNo''Content for cancel button. Any valid element is allowed. Default is: βœ•
editButtonContentnodeNo''Content for edit button. Any valid element is allowed. Default is: ✎
saveButtonClassNamestringNoCustom class name for save button.
cancelButtonClassNamestringNoCustom class name for cancel button.
editButtonClassNamestringNoCustom class name for edit button.
viewContainerClassNamestringNoCustom class name for the container in view mode.See here
editContainerClassNamestringNoCustom class name for the container in edit mode. Will be set to viewContainerClassName if you set it and omit this. See here
mainContainerClassNamestringNodeprecated. Custom class name for the top-level main container. See here
hideIconsboolNofalseSet it to true if you don't want to see default icons on action buttons. See Examples page for more details.
buttonsAlignstringNoafterSet this to before if you want to locate action buttons before the input instead of after it. See here.
editOnViewClickboolNofalseSet it to true if you want clicking on the view to activate the editor.
editingboolNofalseSet it to true if you want the view state to be edit mode.
onEditingStartfunctionNoFunction that will be called when the editing mode is active. See here
showButtonsOnHoverboolNofalseSet it to true if you want to display action buttons only when the text hovered by the user. See here
submitOnEnterboolNofalseSet 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.
cancelOnEscapeboolNofalseSet it to true if you want to cancel the form when Escape is pressed. See here
cancelOnUnfocusboolNofalseSet it to true if you want to cancel the form when clicked outside of the input. See here
submitOnUnfocusboolNofalseSet it to true if you want to submit the form when clicked outside of the input. See here
startEditingOnFocusboolNofalseActivates the edit mode when the view container is in focus. See here
startEditingOnEnterboolNofalseActivates the edit mode when the Enter key is pressed. See here
tabIndexnumberNoAn helper shortcut in case you want to pass the same tabIndex to both viewProps and inputProps.
renderValuefunctionNoCustom render method for the content in the view mode.Use this prop to customize the displayed value in view mode. See here
canEditfunction or booleanNotrueA 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. ValueDescription
main-containerthe main container
view-containerthe container in view mode
edit-containerthe container in edit mode
button-containerthe container for the save and cancel buttons
validation-containerthe container for validation message area
edit-buttonuse this to style the edit button
save-buttonuse this to style the save button
cancel-buttonuse this to style the cancel button
inputThere is only one input. You can select it directly or just use this attr value.
hintTo 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

<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /></br>Chrome<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /></br>Firefox<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /></br>Safari<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" /></br>iOS Safari<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" /></br>Opera<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" /></br>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):

<!-- 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