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

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;
}

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

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):

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