React JS - insert text in the middle of textarea

Sometimes you need weird things while coding. Like here I will show you one weird thing. How to insert a text in the middle of other text inside the HTML textarea inside React JS.

You can check out the demo here.

First let’s create a react app if you haven't already. If you already have a project then you can skip these steps.

1npx create-react-app cool-textarea
2

Now we need a textarea. I will add this inside the App component.

1export default function App() {
2  return (
3    <div>
4      <button>Add some text</button>
5      <textarea></textarea>
6    </div>
7  );
8}
9

Now our cool textarea is ready. Let’s add some text when we click that button. If you just want to add some text at the end or at the beginning of your textarea that’s easiestly simple 😜.

We can add a state and update that state with the appended value at the beginning or end. Like this.

1export default function App() {
2  const [value, setValue] = useState("");
3
4  // insert value before and after inside textarea.
5  const addSomeText = () => {
6    let newValue = "Inserted value Before " + value + " inserted value after";
7    setValue(newValue);
8  };
9
10return (
11    <div className="container">
12      <button onClick={addSomeText}>Add some text</button>
13...
14)}
15

Now with this code will add some text before and after as the value of textarea. Check out the final result here.

Okay, let's see how we can insert text in the middle of the textarea where your cursor is or in the middle of the text you selected.

For that, first I will add a text input, a new state called userInput and a method called insertSomeText. Also we have that onChange where we are updating the user input using setUserInput.

1export default function App() {
2  const [value, setValue] = useState("");
3  const [userInput, setUserInput] = useState("");
4
5  const insertSomeText = () => {  };
6
7  return (
8    <div className="container">
9      <input
10        placeholder="Text to insert"
11        value={userInput}
12        onChange={({ target }) => setUserInput(target.value)}
13      />
14...
15  );
16}
17

Now we have the desired text to insert inside textarea. It’s time to figure out where our cursor is inside the textarea. For that we need to create a reference of the textarea.

1export default function App() {
2  const textareaRef = useRef();
3
4  return (
5		...
6      <textarea
7        ref={textareaRef}
8       ...
9  );
10}
11
12

Inside javascript we can use textarea.selectionStart/End to find out the selection area of the text. So, let’s use that with the textareaRef we just created.

1const insertSomeText = () => {
2    const selectionStart = textareaRef.current.selectionStart;
3    const selectionEnd = textareaRef.current.selectionEnd;
4
5    console.log(selectionStart, selectionEnd)
6};
7

Now if you select some text from inside that textarea or just place a cursor in the middle and click that button it will log the exact position of your selection (start and end).

We have the start and the end of our selection. Let’s use the substring method and combine all of the things together.

1const insertSomeText = () => {
2   const selectionStart = textareaRef.current.selectionStart;
3   const selectionEnd = textareaRef.current.selectionEnd;
4
5   let newValue =
6     value.substring(0, selectionStart) +
7     userInput +
8     value.substring(selectionEnd, value.length);
9   setValue(newValue);
10};
11

Now ladies and gentlemen if you add some value inside the input field and press that Add some text button. That text will be added wherever your cursor is. If you want to check the demo go up.