Reactjs плагин многоточечный многоточие npm

Question

Я пытаюсь использовать этот https://www.npmjs.com/package/react-lines-ellipsis компонент, и он не работает для меня, как ожидалось, или я просто не могу разобраться в этой документации. Он обрезает мой текст, но не расширяет его, когда я нажимаю «Читать дальше», как вы можете видеть в демонстрации. https://xiaody.github.io/react-lines-ellipsis/

Вот мой код, пожалуйста, укажите, что я пропустил. Спасибо https://codesandbox.io/embed/stupefied-jennings-55u4y

Answer 1

Действительно документация неясна. Эта библиотека просто скрывает текст. У него нет обработчиков. Вы должны реализовать себя.

import React, { useState } from "react";
import LinesEllipsis from "react-lines-ellipsis";

function App() {
 const longText =
 "lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem 
   lorem loremlorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem 
    lorem lorem lorem lorem";
 const [isExpand, setExpand] = useState(false);
 return (
  <div className="App">
   {isExpand ? (
    <div>{longText}</div>
   ) : (
    <div onClick={() => setExpand(!isExpand)}>
      <LinesEllipsis text={longText} maxLine="1" ellipsis="... Read more" />
    </div>
  )}
</div>

);}