Joel M. Turner

Illustration

Blog

Notes

Build an Inline Edit Text Input With React Hooks

A nice feature in many apps is to edit a title or other text inline without leaving the context that we’re in.

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.

1import React from "react";
2
3function InlineEdit(props) {
4 return (
5 <span className="inline-text_copy inline-text_copy--active">
6 {props.text}
7 <input className="inline-text_input inline-text_input--rest" />
8 </span>
9 )
10}
11
12export default InlineEdit;
1/* these make sure it can work in any text element */
2.inline-text_copy--active,
3.inline-text_input--active {
4 font: inherit;
5 color: inherit;
6 text-align: inherit;
7 padding: 0;
8 background: none;
9 border: none;
10 border-bottom: 1px dashed #666666;
11}
12
13.inline-text_copy--active {
14 cursor: pointer;
15}
16
17.inline-text_copy--hidden,
18.inline-text_input--hidden {
19 display: none;
20}
21
22.inline-text_input--active {
23 border-bottom: 1px solid #666666;
24 text-align: left;
25}
  • 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.

1import React, {useState} from "react";
2{...}
3const [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.

1const [inputValue, setInputValue] = useState("");

Let’s hook this state up to our elements.

1function InlineEdit(props) {
2 const [isInputActive, setIsInputActive] = useState(false);
3 const [inputValue, setInputValue] = useState("");
4
5 return (
6 <span className="inline-text">
7 <span className={`inline-text_copy inline-text_copy--${!isInputActive ? "active" : "rest"}`}>
8 {props.text}
9 </span>
10 <input
11 value={inputValue}
12 onChange={(e) => setInputValue(e.target.value)}
13 className={`inline-text_input inline-text_input--${isInputActive ? "active" : "rest"}`} />
14 </span>
15 )
16}
  • 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.

1function InlineEdit(props) {
2 const [isInputActive, setIsInputActive] = useState(false);
3 const [inputValue, setInputValue] = useState(props.text);
4
5 const enter = useKeypress('Enter');
6 const esc = useKeypress('Escape');
7
8 useEffect(() => {
9 if (isInputActive) {
10 // if Enter is pressed, save the text and case the editor
11 if (enter) {
12 props.onSetText(inputValue);
13 setIsInputActive(false);
14 }
15 // if Escape is pressed, revert the text and close the editor
16 if (esc) {
17 setInputValue(props.text);
18 setIsInputActive(false);
19 }
20 }
21 }, [enter, esc]); // watch the Enter and Escape key presses
22
23
24 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.

1function InlineEdit(props) {
2 const [isInputActive, setIsInputActive] = useState(false);
3 const [inputValue, setInputValue] = useState(props.text);
4
5 // get the the wrapping span node
6 const wrapperRef = useRef(null);
7
8 const enter = useKeypress('Enter');
9 const esc = useKeypress('Escape');
10
11 // this hook takes a ref to watch and a function to run
12 // if the click happened outside
13 useOnClickOutside(wrapperRef, () => {
14 if (isInputActive) {
15 // save the value and close the editor
16 props.onSetText(inputValue);
17 setIsInputActive(false);
18 }
19 });
20
21 useEffect(() => {
22 if (isInputActive) {
23 // if Enter is pressed, save the text and case the editor
24 if (enter) {
25 props.onSetText(inputValue);
26 setIsInputActive(false);
27 }
28 // if Escape is pressed, revert the text and close the editor
29 if (esc) {
30 setInputValue(props.text);
31 setIsInputActive(false);
32 }
33 }
34 }, [enter, esc]); // watch the Enter and Escape key presses
35
36 return (
37 <span className="inline-text" ref={wrapperRef}>
38 {...}
  • 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.

1const inputRef = useRef(null);
2
3 // focus the cursor in the input field on edit start
4 useEffect(() => {
5 if (isInputActive) {
6 inputRef.current.focus();
7 }
8 }, [isInputActive]);
9
10 {...}
11
12 <input
13 ref={inputRef}
14 value={inputValue}
15 onChange={(e) => setInputValue(e.target.value)}
16 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.

1import React, { useState, useEffect, useRef } from "react";
2import useKeypress from "../hooks/useKeypress";
3import useOnClickOutside from "../hooks/useOnClickOutside";
4
5function InlineEdit(props) {
6 const [isInputActive, setIsInputActive] = useState(false);
7 const [inputValue, setInputValue] = useState(props.text);
8
9 const wrapperRef = useRef(null);
10 const textRef = useRef(null);
11 const inputRef = useRef(null);
12
13 const enter = useKeypress("Enter");
14 const esc = useKeypress("Escape");
15
16 // check to see if the user clicked outside of this component
17 useOnClickOutside(wrapperRef, () => {
18 if (isInputActive) {
19 props.onSetText(inputValue);
20 setIsInputActive(false);
21 }
22 });
23
24 // focus the cursor in the input field on edit start
25 useEffect(() => {
26 if (isInputActive) {
27 inputRef.current.focus();
28 }
29 }, [isInputActive]);
30
31 useEffect(() => {
32 if (isInputActive) {
33 // if Enter is pressed, save the text and case the editor
34 if (enter) {
35 props.onSetText(inputValue);
36 setIsInputActive(false);
37 }
38 // if Escape is pressed, revert the text and close the editor
39 if (esc) {
40 setInputValue(props.text);
41 setIsInputActive(false);
42 }
43 }
44 }, [enter, esc]); // watch the Enter and Escape key presses
45
46 return (
47 <span className="inline-text" ref={wrapperRef}>
48 <span
49 ref={textRef}
50 onClick={() => setIsInputActive(true)}
51 className={`inline-text_copy inline-text_copy--${
52 !isInputActive ? "active" : "hidden"
53 }`}
54 >
55 {props.text}
56 </span>
57 <input
58 ref={inputRef}
59 // set the width to the input length multiplied by the x height
60 // it's not quite right but gets it close
61 style={{ width: Math.ceil(inputValue.length * 0.9) + "ex" }}
62 value={inputValue}
63 onChange={e => {
64 setInputValue(e.target.value);
65 }}
66 className={`inline-text_input inline-text_input--${
67 isInputActive ? "active" : "hidden"
68 }`}
69 />
70 </span>
71 );
72}
73
74export 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!

Discuss this article on Twitter