DEV Community

Ali Oğuzhan Yıldız
Ali Oğuzhan Yıldız

Posted on • Edited on

4 2

React EdiText - Inline Editable Text Component

I just published my first open source library for React. EdiText is a React component provides inline editing for texts.

You can see examples and usage on the Github page. Any kind of feedback is welcome. Here its Github Page:

https://alioguzhan.github.io/react-editext/

Top comments (2)

Collapse
 
bthntprlk profile image
batu • Edited

Nice work Oğuzhan,

After a quick review on your code, I have a few suggestion for you:

On your onKeyPress function, creating new line by pressing enter is impossible. If it’s controller by a property (like saveOnEnter) might be better.

Your render seems dirty. It will be better to split your UI things into smaller components and make it rendered on your main render by using corresponding properties.

There is one more thing about render, you have a condition to render input or textarea. Actually, these properties are not interested in render, they are interested in component. Assigning their properties to an object (like this.inputProps = { ...blabla }) at constructor or componentWillMount and using it in your render method like would clean your render. By reading it top-down, that condition looks surprising

Collapse
 
alioguzhan profile image
Ali Oğuzhan Yıldız

Thanks for the feedback Batu! Sorry for the delay. I didn't get a notification for you reply.
I made some big improvements since the first release. You can see and inspect them. All kind of Pull requests and issues are welcome! Thanks again.

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay