react-editext

> Editable Text Component for React Applications

!Github All Contributors

This project is generated from react-typescript-library template.

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. 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 (



);
}
`

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

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

$3

`bash
nix-shell --pure
develop
`

This will start a tmux session for both library and example app.

$3

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/ in your browser.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

jdoklovic 💻	Obed Castillo 💻	Bruno Aderaldo 🐛 💻	Sascha Kiefer 💬 🤔	Ehab Alsharif 💻 📖	Harsha N Hegde 🐛 💻	Justin Kuntz 🤔 🐛
Braulio Soncco 🤔	zig 🐛	Isaiah Taylor 🤔	anz000 🤔	Amir M 🤔	Harshil Parmar 📖	Brandon Paris 🐛
Christopher Schaub 🤔	Krzysztof Danek 🐛	Pavel Kalashnikov 🐛	Ján Bočínec 🐛	shubh057 🤔	Sachin Jain 🐛	SeYeD Sina 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © alioguzhan