Author: Joel M Turner Published Updated
A nice feature in many apps is to edit a title or other text inline without leaving the context that we’re in. This component composes with reusable React layout components (Flexbox and CSS Grid) for alignment and spacing.
Here’s what we’ll be building.
Let’s take a look at the requirements for this component.
- Must show text when in rest
- Click on text to edit the text
- Enter key to save
- Esc key to exit without saving
- Click outside to save
Cool let’s start by creating the resting state. We’re going to do some basic styling with CSS to help us.
import React from "react";
function InlineEdit(props) {
return (
<span className="inline-text_copy inline-text_copy--active">
{props.text}
<input className="inline-text_input inline-text_input--rest" />
</span>
);
}
export default InlineEdit;
/* these make sure it can work in any text element */
.inline-text_copy--active,
.inline-text_input--active {
font: inherit;
color: inherit;
text-align: inherit;
padding: 0;
background: none;
border: none;
border-bottom: 1px dashed #999999;
outline: none;
}
.inline-text_copy--active {
cursor: pointer;
}
.inline-text_copy--hidden,
.inline-text_input--hidden {
display: none;
}
.inline-text_input--active {
border-bottom: 1px solid #666666;
text-align: left;
}
- Must show text when in rest
This sets is us up with a simple text component that displays our text. Now the trickery begins! We want to click on the text and have the input show up. Let’s create some state to track whether we’re at rest or active.
import React, {useState} from "react";
{...}
const [isInputActive, setIsInputActive] = useState(false);
Cool, now we have some state to help us display/hide our text and input. We also need some state to track what is being typed in our input. Let’s add another useState to hold that text.
const [inputValue, setInputValue] = useState("");
Let’s hook this state up to our elements.
function InlineEdit(props) {
const [isInputActive, setIsInputActive] = useState(false);
const [inputValue, setInputValue] = useState("");
return (
<span className="inline-text">
<span
className={`inline-text_copy inline-text_copy--${
!isInputActive ? "active" : "rest"
}`}
>
{props.text}
</span>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
className={`inline-text_input inline-text_input--${
isInputActive ? "active" : "rest"
}`}
/>
</span>
);
}
- Click on text to edit the text
Alright, now we need to set up the saving and escaping of the text. We can do this with a useEffect and useKeypress hook that watch for a key click and take an action.
function InlineEdit(props) {
const [isInputActive, setIsInputActive] = useState(false);
const [inputValue, setInputValue] = useState(props.text);
const enter = useKeypress('Enter');
const esc = useKeypress('Escape');
useEffect(() => {
if (isInputActive) {
// if Enter is pressed, save the text and case the editor
if (enter) {
props.onSetText(inputValue);
setIsInputActive(false);
}
// if Escape is pressed, revert the text and close the editor
if (esc) {
setInputValue(props.text);
setIsInputActive(false);
}
}
}, [enter, esc]); // watch the Enter and Escape key presses
return ({...}
- Enter key to save
- Esc key to exit without saving
Next we’ll add a useRef on the wrapping span to help us tell if a click happened outside of the component. We’re going to use the useOnClickOutside hook from useHooks.com.
function InlineEdit(props) {
const [isInputActive, setIsInputActive] = useState(false);
const [inputValue, setInputValue] = useState(props.text);
// get the the wrapping span node
const wrapperRef = useRef(null);
const enter = useKeypress('Enter');
const esc = useKeypress('Escape');
// this hook takes a ref to watch and a function to run
// if the click happened outside
useOnClickOutside(wrapperRef, () => {
if (isInputActive) {
// save the value and close the editor
props.onSetText(inputValue);
setIsInputActive(false);
}
});
useEffect(() => {
if (isInputActive) {
// if Enter is pressed, save the text and case the editor
if (enter) {
props.onSetText(inputValue);
setIsInputActive(false);
}
// if Escape is pressed, revert the text and close the editor
if (esc) {
setInputValue(props.text);
setIsInputActive(false);
}
}
}, [enter, esc]); // watch the Enter and Escape key presses
return (
<span className="inline-text" ref={wrapperRef}>
{...}
- Click outside to save
We can help the user by focusing the input when they click on the text. To do this we can add a useRef on the input and a useEffect that watches to see if the input is active.
const inputRef = useRef(null);
// focus the cursor in the input field on edit start
useEffect(() => {
if (isInputActive) {
inputRef.current.focus();
}
}, [isInputActive]);
{...}
<input
ref={inputRef}
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
className={`inline-text_input inline-text_input--${isInputActive ? "active" : "rest"}`} />
That was a lot of little parts. Let’s put it together to see what we have. I’ve added a few helper functions as well.
import React, { useState, useEffect, useRef } from "react";
import useKeypress from "../hooks/useKeypress";
import useOnClickOutside from "../hooks/useOnClickOutside";
function InlineEdit(props) {
const [isInputActive, setIsInputActive] = useState(false);
const [inputValue, setInputValue] = useState(props.text);
const wrapperRef = useRef(null);
const textRef = useRef(null);
const inputRef = useRef(null);
const enter = useKeypress("Enter");
const esc = useKeypress("Escape");
// check to see if the user clicked outside of this component
useOnClickOutside(wrapperRef, () => {
if (isInputActive) {
props.onSetText(inputValue);
setIsInputActive(false);
}
});
const onEnter = useCallback(() => {
if (enter) {
props.onSetText(inputValue);
setIsInputActive(false);
}
}, [enter, inputValue, props.onSetText]);
const onEsc = useCallback(() => {
if (esc) {
setInputValue(props.text);
setIsInputActive(false);
}
}, [esc, props.text]);
// focus the cursor in the input field on edit start
useEffect(() => {
if (isInputActive) {
inputRef.current.focus();
}
}, [isInputActive]);
useEffect(() => {
if (isInputActive) {
// if Enter is pressed, save the text and close the editor
onEnter();
// if Escape is pressed, revert the text and close the editor
onEsc();
}
}, [onEnter, onEsc, isInputActive]); // watch the Enter and Escape key presses
const handleInputChange = useCallback(
(event) => {
// sanitize the input a little
setInputValue(DOMPurify.sanitize(event.target.value));
},
[setInputValue],
);
const handleSpanClick = useCallback(
() => setIsInputActive(true),
[setIsInputActive],
);
return (
<span className="inline-text" ref={wrapperRef}>
<span
ref={textRef}
onClick={handleSpanClick}
className={`inline-text_copy inline-text_copy--${
!isInputActive ? "active" : "hidden"
}`}
>
{props.text}
</span>
<input
ref={inputRef}
// set the width to the input length multiplied by the x height
// it's not quite right but gets it close
style={{ minWidth: Math.ceil(inputValue.length) + "ch" }}
value={inputValue}
onChange={handleInputChange}
className={`inline-text_input inline-text_input--${
isInputActive ? "active" : "hidden"
}`}
/>
</span>
);
}
export default InlineEdit;
It’s worth noting that input text may need to be sanitized before being saved. I’ve had good luck with DOMPurify.
That’s it! Go forth and edit!
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.