react-editext-with-ref

<div align="center"> <img src="./logo.png" alt="react-editext" width="200" /> </div> [![FreePalestine.Dev](https://freepalestine.dev/header/1)](https://freepalestine.dev) # react-editext > Editable Text Component for React Applications [![NPM](https://img.shields.io/npm/v/react-editext.svg)](https://www.npmjs.com/package/react-editext) [![npm](https://img.shields.io/npm/dm/react-editext.svg)](https://www.npmjs.com/package/react-editext) [![Github](https://github.com/alioguzhan/react-editext/workflows/build/badge.svg)](https://github.com/alioguzhan/react-editext/actions) [![codecov](https://codecov.io/gh/alioguzhan/react-editext/branch/master/graph/badge.svg)](https://codecov.io/gh/alioguzhan/react-editext) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=alioguzhan_react-editext&metric=alert_status)](https://sonarcloud.io/dashboard?id=alioguzhan_react-editext) ![Github All Contributors](https://img.shields.io/github/all-contributors/alioguzhan/react-editext) [![FreePalestine.Dev](https://freepalestine.dev/badge?t=d&u=0&r=1)](https://freepalestine.dev) This project is generated from [react-typescript-library template](https://github.com/alioguzhan/react-typescript-library). ## Install ```bash npm install --save react-editext ``` Or with yarn: ```bash yarn add react-editext ``` ## Usage EdiText is highly customizable. You can see more examples [here](https://alioguzhan.github.io/react-editext/). Here is a basic usage: ```jsx 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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-editext-template-5twrh?fontsize=14&hidenavigation=1&theme=dark) You can customize almost everything based on your needs. Please navigate to [Props](#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](https://alioguzhan.github.io/react-editext/#custom-classes-for-containers) | | 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](https://alioguzhan.github.io/react-editext/#custom-classes-for-containers) | | mainContainerClassName | string | No | | `deprecated`. Custom class name for the top-level main container. See [here](https://alioguzhan.github.io/react-editext/#custom-classes-for-containers) | | 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](https://alioguzhan.github.io/react-editext/#change-buttons-location). | | 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](https://alioguzhan.github.io/react-editext/#events) | | 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](https://alioguzhan.github.io/react-editext/#show-on-hover) | | 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](https://alioguzhan.github.io/react-editext/#save-on-enter) | | cancelOnUnfocus | bool | No | `false` | Set it to `true` if you want to cancel the form when clicked outside of the input. See [here](https://alioguzhan.github.io/react-editext/#cancel-on-blur) | | submitOnUnfocus | bool | No | `false` | Set it to `true` if you want to submit the form when clicked outside of the input. See [here](https://alioguzhan.github.io/react-editext/#submit-on-blur) | | startEditingOnFocus | bool | No | `false` | Activates the edit mode when the view container is in focus. See [here](https://alioguzhan.github.io/react-editext/#edit-on-focus) | | startEditingOnEnter | bool | No | `false` | Activates the edit mode when the `Enter` key is pressed. See [here](https://alioguzhan.github.io/react-editext/#edit-on-enter) | | 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](https://alioguzhan.github.io/react-editext#render-value) | | 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: ```css 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](https://alioguzhan.github.io/react-editext/#styled-components). ## Browser Support | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)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" />](http://godban.github.io/browsers-support-badges/)iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Edge | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | ## Development ### With Nix ```bash 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. ```bash yarn install yarn start ``` Navigate to `example/` folder and repeat the above steps. ```bash cd example yarn install yarn start ``` Now open [http://localhost:3000/](http://localhost:3000/) in your browser. ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):    <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"/> jdoklovic</a> <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"/> Obed Castillo</a> <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"/> Bruno Aderaldo</a> <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"/> Sascha Kiefer</a> <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"/> Ehab Alsharif</a> <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"/> Harsha N Hegde</a> <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"/> Justin Kuntz</a> <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"/> Braulio Soncco</a> <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"/> zig</a> <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"/> Isaiah Taylor</a> <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"/> anz000</a> <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"/> Amir M</a> <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"/> Harshil Parmar</a> <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"/> Brandon Paris</a> <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"/> Christopher Schaub</a> <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"/> Krzysztof Danek</a> <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"/> Pavel Kalashnikov</a> <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"/> Ján Bočínec</a> <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"/> shubh057</a> <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"/> Sachin Jain</a> <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"/> SeYeD Sina</a> <a href="#ideas-spostad7" title="Ideas, Planning, & Feedback">🤔</a></td> </tr> </tbody> </table>    This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! ## License MIT © [alioguzhan](https://github.com/alioguzhan)