Meetolog progress: editable component
In the last few sessions I've been working on an editable component. It's a component that has two building blocks - a preview and an editable input.
It's not a secret that this thing is natively supported by most browsers using the HTML contentedtiable. It's a simple attribute that you put on a div and the contents inside of it become editable on click. It's nice, but has some drawbacks.
For my purposes I decided to stick with a much more obvious approach.
The preview part of the component is a div with the content to be presented. On click on that div it gets replaced by an input or a textarea, depending on the need.
It's used like this:
1 2 3 4 5 | <Editable type="input" value={meeting.title} className="meeting-title" /> |
The trick to make it non-obvious to the end user that behind the scenes there is an input is to style it in such a way, that the input/textarea has no borders, paddings etc. It's several lines of css, but I'm happy with the result.
Here's a short video of how it looks/works.
Comments
Post a comment