react-editext

Editable Text Component for React Applications

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

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:

Usage:

 button[editext="cancel-button"] {
    &:hover {
      background: crimson;
      color: #fff;
    }
  }

  div[editext="view-container"] {
    background: #6293C3;
    padding: 15px;
    border-radius: 5px;
    color: #fff;
  }

  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	IE / Edge
✅	✅	✅	✅	✅	✅ ❗️

• rows prop for textarea has no effect in IE/Edge. You can set its height with some css.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

alioguzhan 💻 📖	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 🐛

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

License

MIT © alioguzhan