Using a span as text input in React with content-editable

Question

I want to use a span as a simple text input. If I weren't using React, I'd just do this the normal way with content-editable. However, this doesn't work nicely with React.

I know that Draft.js and the NPM package react-contenteditable both handle some of these complexities for React. But those sort of seem like overkill for this, because I don't want the input to be able to handle anything except plain text.

Should I just use Draft.js or react-contenteditable, or can I do something simpler?

Relevant: http://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable — TimoStaudinger, Aug 03 '16 at 20:51

score 2 · Answer 1 · answered Aug 03 '16 at 21:40

2

Upon further consideration, react-contenteditable seems to be the best solution for this. It's actually pretty lightweight and quite customizable. Also, the source code is short enough and simple enough that I was able to just read the whole thing.

answered Aug 03 '16 at 21:40

Buck Shlegeris

517
6
22

Using a span as text input in React with content-editable

1 Answers1