react-lines-ellipsis【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する

本日は、react-lines-ellipsisのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。
GitHub - xiaody/react-lines-ellipsis: Simple multiline ellipsis component for React.JS

実際に使ってみる

まずはcreate-react-appでReactのプロジェクトを作成しました。

それからreadmeにあるようにライブラリをインストールします。

npm install --save react-lines-ellipsis

App.jsを以下のように書き換えます。（インデントがおかしいのは許してください）

import React from 'react';
import logo from './logo.svg';
import './App.css';
import LinesEllipsis from 'react-lines-ellipsis'

function App() {
  return (
    <div className="App">
	<LinesEllipsis
        　text='longlongtextlonglongtextlonglongtextlonglongtext（ここ本当はすんごい長い）'
　　　 maxLine='3'
	   ellipsis='...'
   	   trimRight
	   basedOn='letters'
　　/>
    </div>
  );
}

export default App;

ちょっとわかりにくいんですけど、ながーいテキストの最後に「...」が付いています！！

中のコードも少しだけ読んでみたのですが、とても少ないReactで書かれていて自分でライブラリを作るときに参考になりそうでした👏

3行以内でまとめる

react-lines-ellipsisを導入すると、

• 文章量を減らせるコンポーネントが使えるようになる。

以上です！