리액트 - 줄 번호가 있는 Text Area 예제 (Add Line Numbers to HTML)

리액트 전체 링크

 

아래와 같이 텍스트 공간에 줄 번호를 추가해보자.

 

아래 링크의 코드를 리액트로 나타내기만 하였다.

https://webtips.dev/add-line-numbers-to-html-textarea

How to Quickly Add Line Numbers to HTML Textarea

 

TextAreaWithLineNumber.css

.editor {
  display: inline-flex;
  gap: 10px;
  font-family: monospace;
  line-height: 21px;
  background: #282a3a;
  border-radius: 3px;
  padding: 20px 10px;
}

.line-numbers {
  width: 20px; 
  text-align: right;
}

.line-numbers span {
  font-size: 13px;
  counter-increment: linenumber;
}

.line-numbers span::before {
  content: counter(linenumber);
  display: block;
  color: #506882;
}

textarea {
  font-size: 13px;
  line-height: 21px;
  overflow-y: hidden;
  padding: 0;
  border: 0;
  background: #282a3a;
  color: #FFF;
  outline: none;
  resize: none;
}

 

App.js

import { useEffect } from "react";
import "../src/css/TextAreaWithLineNumber.css";

function App() {
  const init = () => {
    const textarea = document.querySelector("textarea");
    const lineNumbers = document.querySelector(".line-numbers");

    textarea.addEventListener("keyup", (event) => {
      const numberOfLines = event.target.value.split("\n").length;

      lineNumbers.innerHTML = Array(numberOfLines)
        .fill("<span></span>")
        .join("");
    });

    textarea.addEventListener("keydown", (event) => {
      if (event.key === "Tab") {
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;

        textarea.value =
          textarea.value.substring(0, start) +
          "\t" +
          textarea.value.substring(end);

        event.preventDefault();
      }
    });
  };

  useEffect(() => init(), []);

  return (
    <div className="App" style={{ margin: "10px" }}>
      <div className="editor">
        <div className="line-numbers">
          <span></span>
        </div>
        <textarea></textarea>
      </div>
    </div>
  );
}

export default App;

 

라인이 생기긴 하지만 span이 추가될 때마다 깜빡임이 발생한다.