What is it?

We all aim for a high UX.

Due to the structural limitation of the existing textarea tag, which only handles text values, it is difficult to develop to meet various requirements.

It makes the textarea tag work as if it supports the a tag.

You can use the existing textarea attributes, and CSS control such as resize is also possible.

Storybook

You can see various implementations of LinkingTextarea through Storybook. Click here!

Installation

npm install react-textarea-link

Usage

First step

...
"use client" // Add if you use next.js.
import LinkingTextarea from 'react-link-textarea'; // needs importing

const Component = () => {
  ...
}

Basic usage

const Section = () => {
  return (
    <>
      <div>
        <LinkingTextarea/>
      </div>
    </>
  );
};

export default Section;

With TailwindCSS

🔥 The className prop of JSX component is not provided. Use containerClassName and textareaClassName.

const Section = () => {
  return (
    <>
      <div className="w-full px-30 min-h-150">
        <LinkingTextarea
          containerClassName="w-full h-full"
          textareaClassName="pl-10 pr-10 rounded-md pt-10"
          fontColor="#5C5C5C"
          caretColor="#FEFEFE"
        />
      </div>
    </>
  );
};

With inline style

const Section = () => {
  return (
    <>
      <div
        style={{
          width: '100%',
          paddingLeft: 30,
          paddingRight: 30,
          minHeight: 150,
        }}>
        <LinkingTextarea
          containerStyle={{width: '100%', height: '100%'}}
          textareaStyle={{padding: 10, borderRadius: 12, resize: 'none'}}
          linkTarget="_self"
        />
      </div>
    </>
  );
};

Props API

ref                             --> HTMLTextAreaElement Ref is here, You can handle the textarea value and interaction.


containerStyle?: CSSProperties; --> Inline style to be passed to the part surrounding the textarea


textareaStyle?: CSSProperties;  --> Inline style to be passed to textarea (Textarea control CSS such as resize property can be used)


containerClassName?: string;    --> className to pass to container


textareaClassName?: string;     --> className to pass to textarea


linkTarget?: '_blank' | '_self' | '_parent' | '_top' | string  --> pass to a tag target attribute, default '_blank'.
// (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)


fontColor?: CSSProperties['color'];        --> 🚨 Required when changing font color, default 'black' (CSS color property is used as is)
caretColor?: CSSProperties['caretColor'];  --> 🚨 Required when changing caret color, default 'black' (CSS color property is used as is)


// textarea attributes can be used on props

readOnly
autoComplete
...

(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)
--> 🚨 Among the basic JSX textarea properties, only `style` and `className` are not accepted.

Example

Handling is possible through ref in the same way as previously using textarea.

const Section = () => {
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const onClickSubmit = () => {
    if (textareaRef.current) {
      console.log(textareaRef.current.value);
    }
  };

  useEffect(() => {
    if (!textareaRef.current) return;

    textareaRef.current.focus();
  }, []);

  return (
    <>
      <p>Textarea</p>
      <div>
        <LinkingTextarea ref={textareaRef} />
        <button onClick={onClickSubmit}></button>
      </div>
    </>
  );
};

Changelog

changelog.md