react-simple-read-more/dist/index.esm.js

simple readmore library which allows you to hide your long description with read more and read less button

import React, { useState, useEffect } from 'react';
import Linkify from 'linkify-react';

function createTextArr(text, charLimit) {
  let lines = [];
  let result = [];
  if (text) lines = text.split("\n");
  for (let i = 0; i < lines.length; i++) {
    result.push({
      text: lines[i],
      newLine: true
    });
    let tempText = lines[i];
    let tempArr = [];
    let cmptext = '';
    tempArr.push(tempText);
    while (tempText.length > charLimit && (!tempArr.length || tempArr[0] != cmptext)) {
      cmptext = tempArr[0];
      tempText = tempArr[0].substr(0, tempArr[0].length / 2);
      for (let j = 0; j < tempArr.length; j = j + 2) {
        let splitIndex = tempArr[j].length / 2;
        while (tempArr[j].charAt(splitIndex) != ' ' && splitIndex < tempArr[j].length) {
          splitIndex++;
        }
        tempArr.splice(j + 1, 0, tempArr[j].substr(splitIndex));
        tempArr.splice(j, 1, tempArr[j].substr(0, splitIndex));
      }
    }
    lines.splice(i, 1, tempArr[0]);
    result.splice(i, 1, {
      text: tempArr[0],
      newLine: tempArr.length == 1 ? true : false
    });
    for (let j = 1; j < tempArr.length; j++) {
      lines.splice(i + j, 0, tempArr[j]);
      result.splice(i + j, 0, {
        text: tempArr[j],
        newLine: j == tempArr.length - 1 ? true : false
      });
      i++;
    }
  }
  return result;
}

function StringParser({
  text: inputText,
  charLimit = 200,
  breakOn = Infinity
}) {
  const [isMore, setIsMore] = useState(false);
  const [text, setText] = useState([]);
  useEffect(() => {
    setText(createTextArr(inputText, charLimit));
  }, [inputText, charLimit]);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%',
      wordWrap: 'break-word'
    }
  }, text.map((station, i) => {
    if (station.text === '' && (i < breakOn || isMore)) return /*#__PURE__*/React.createElement("div", {
      style: {
        height: 10
      },
      className: "",
      key: i
    }, station.text.replace(/ /g, "\u00a0"));else if (i < breakOn || isMore) return station.newLine ? /*#__PURE__*/React.createElement("span", {
      key: i
    }, /*#__PURE__*/React.createElement(Linkify, {
      options: {
        target: '_blank'
      }
    }, station.text), /*#__PURE__*/React.createElement("div", null)) : /*#__PURE__*/React.createElement(Linkify, {
      options: {
        target: '_blank'
      },
      key: i
    }, station.text);else if (i === breakOn) return /*#__PURE__*/React.createElement("span", {
      key: i,
      className: "cursor-pointer edittabs-indiv-tabs",
      onClick: () => setIsMore(true)
    }, "...Read More");else return null;
  }), isMore ? /*#__PURE__*/React.createElement("div", {
    className: "cursor-pointer edittabs-indiv-tabs",
    onClick: () => setIsMore(false)
  }, "...Show less") : null);
}

export { createTextArr, StringParser as default };