@로 태그 가능한 MentionsInput, textarea 박스를 위한 autosize 라이브러리

MentionsInput

-npm 공식 사이트

https://www.npmjs.com/package/react-mentions

react-mentions

이 사이트를 보면 많이 도움이 된다.

 

-공식 사이트 예시

<MentionsInput value={this.state.value} onChange={this.handleChange}>
  <Mention
    trigger="@"
    data={this.props.users}
    renderSuggestion={this.renderUserSuggestion}
  />
  <Mention
    trigger="#"
    data={this.requestTag}
    renderSuggestion={this.renderTagSuggestion}
  />
</MentionsInput>

MentionsInput은 Mention이 있어야 에러가 발생하지 않는다. 

슬랙 클론 코딩을 하면서 채팅 창과 태그 기능을 구현하기 위해서 사용했다.

 

사용한 코드 

MentionsTextarea

MentionsTextarea는 emotion js에서 MentionsInput을 기반으로 만들었다.

 

 

value와 onChange: 평소 input처럼 활용해주면 된다.

onKeyPress: 지정한 키를 누르면 설정한 이벤트가 발동된다. 이 코드에서는 shift + enter를 누르면 줄 바꿈을 하고 enter만 있으면 채팅이 전송된다.

placeholder: 부모 컴포넌트에서 placeholder을

          placeholder={`Message #${channel}`}

이런식으로 지정해서 사용한다.

inputRef: autosize 라이브러리를 사용하기 위한 Ref

allowSuggestionsAboveCursor: @ 태그를 사용했을 때 renderSuggestions한거보다 위에 보여달라는 의미이다.

Mention

appendSpaceAdd: @ 태그를 했을 때 2명을 연달아 하면

사진처럼 공백을 줘서 띄워준다.

trigger: 써 준 문자를 치면 태크가 나온다.

data: trigger를 했을 때 나오는 목록 리스트

renderSuggestion

renderSuggestion: 사진처럼 태그 할 사람의 이미지를 나오게 해주고 선택되면 배경색도 css를 이용해 지정할 수 있다.

autosize

-npm 공식 사이트

https://www.npmjs.com/package/autosize

autosize

 

-사용 코드

  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (textareaRef.current) {
      autosize(textareaRef.current);
    }
  }, []);

autosize를 사용할 곳에 Ref를 주고 이렇게 하면 사이즈가 자동으로 늘어난다.