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で書かれていて自分でライブラリを作るときに参考になりそうでした👏