[React][라이브러리 소개] 문자열 생략 처리 방법

 

# react-lines-ellipsis 라이브러리를 활용한 생략 처리

- React에서 문자열 관련 컴포넌트를 개발하다보면,  문자열의 일부만을 보여주고 생략 처리가 필요한 경우가 있습니다. React Native의 경우에는 Text 컴포넌트에 ellipsis 옵션이 기본적으로 있기 때문에 쉽게 구현이 가능하지만, React에는 포함되어 있지 않기 때문에, 막상 직접 구현하려면 생각보다 시간이 걸립니다. 이번 포스팅에서는 이런 경우 도움이 될 수 있는 라이브러리를 소개하려고 합니다.

 

# 깃헙 페이지

GitHub - xiaody/react-lines-ellipsis: Simple multiline ellipsis component for React.JS

 

# 설치 및 사용법

- 라이브러리를 설치합니다.

yarn add react-lines-ellipsis

- 아래와 같이 text에 필요한 문자열을 넣고, 나머지 인자들을 넣어주시면 됩니다.

import LinesEllipsis from 'react-lines-ellipsis'

<LinesEllipsis
  text='long long text'
  maxLine='3'
  ellipsis='...'
  trimRight
  basedOn='letters'
/>

- 위의 내용은 최소한의 사용방법입니다. 일반적으로 더 추가적인 옵션이 필요한 경우가 많지는 않았으나, 조금 더 추가적인 옵션을 확인해보고 싶으신 분들은 아래의 데모 페이지나 깃헙 페이지를 참고해주시기 바랍니다

# 데모 페이지

https://xiaody.github.io/react-lines-ellipsis/

react lines ellipsis

---