/takker/可変長<textarea>

generated at 2/22/2025, 3:15:49 AM
可変長<textarea>
内容に応じていい感じに大きさを変えてくれる<textarea>
ここに載っていた
内容に応じてサイズが可変する <textarea> を素敵に実装する - Qiita

で作ってみる
CSSベタ打ちは面倒なので、styled-componentを使ってみる
Shadow DOMにCSSを書くのと同等のことができる
19:16:30 あんまり良くわからなかった
tsximport * as React from 'react';
import { useEffect } from 'react';
import styled from 'styled-components';

const OuterDiv = styled.div({
  position: 'relative',
  fontSize: '1rem',
  lineHeight: 1.8,
});

const Dummy = styled.div({
  overflow: 'hidden',
  visibility: 'hidden',
  boxSizing: 'border-box',
  minHeight: 'calc( 1.8em )',
});
const MainText = styled.textarea({
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  resize: 'none',
});

// 入力値に応じて可変する<input>
export const FlexTextArea: React.FC<React.TextareaHTMLAttributes<
  HTMLTextAreaElement
>> = ({ onChange, value, ...props }) => {
  const [text, setText] = React.useState(value);

  const _onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setText(e.target.value);
    onChange?.(e);
  };
  useEffect(() => setText(value), [value]);

  return (
    <OuterDiv>
      <Dummy aria-hidden="true">{text}</Dummy>
      <MainText value={text} onChange={_onChange} {...props} />
    </OuterDiv>
  );
};

Reference
Reactで行数可変なtextareaを作った話 - Qiita
での実装方法
でなんとかしている

#2020-12-03 18:20:29