Hide Condition Text in ReactJS

Question

I have implemented the show more/show less in reactjs in NEXT.JS using styled-components and ellipsis from polished.js. Good thing, its already adjusting to 3 lines regardless of screen size. My problem is that if the descriptions are few. How can I hide the "Show more"?

Codesandbox is here SEE THIS

const DescriptionText = styled.div`
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
  ${({ showMore }) => showMore && ellipsis(undefined, 3)}
`;

Use [this method](https://stackoverflow.com/questions/783899/how-can-i-count-text-lines-inside-an-dom-element-can-i) to count lines, and then simply do a conditional rendering. — Eldar B., Aug 02 '21 at 07:27

TechySharnav · Accepted Answer · 2021-08-02T09:27:47.110

You can use conditional rendering to render the <ShowMoreText>. You can get the line count by dividing element's offsetHeight by its lineHeight.

const Description = () => {
  const [isShowMore, setIsShowMore] = useState(true);
  const [lineCount, setLineCount] = useState(0);
  const ref = useRef(null);
  const toggleReadMore = () => setIsShowMore((show) => !show);

  useEffect(() => {
    let descp = ref.current;
    let lc =
      descp.offsetHeight /
      parseInt(getComputedStyle(descp).getPropertyValue("line-height"), 10);
    console.log(lc);
    setLineCount(lc);
  }, []);

  return (
    <MainContainer>
      <TitleText>Description</TitleText>
      <DescriptionText ref={ref} showMore={isShowMore}>
        {text}
      </DescriptionText>
      {lineCount >= 3 ? (
        <ShowMoreText onClick={toggleReadMore}>
          {isShowMore ? "Show more..." : "Show less"}
        </ShowMoreText>
      ) : null}
    </MainContainer>
  );
};

CodeSandbox - https://codesandbox.io/s/show-more-based-on-height-in-react-forked-8wqob?file=/Wrapper.js

Note: You may want to explicitly specify line-height for <DescriptionText>.

I don't think its 271 on all cases cause on small screens it will be different — Gray Singh, Aug 02 '21 at 07:54

score 0 · Answer 2 · answered Aug 02 '21 at 15:35

I think that the solution exactly that you asked. Hide the button if 3 row visible of less. If small screen it's adaptive. woking example

Wrapped.js

const Description = () => {
  const [isShowMore, setIsShowMore] = useState(true);
  const [hasMore, setHasMore] = useState(false);
  const [bodyWidth, setBodyWidth] = useState(0);
  const ref = useRef(null);

  const toggleReadMore = () => setIsShowMore(show => !show);

  useEffect(() => {
    const resize = () => {
      const getWidth = document.body.clientWidth;
      setBodyWidth(getWidth);
    };
    window.addEventListener('resize', resize);

    const text = ref.current;
    const hiddenText = text.scrollHeight;

    const visibleText = +getComputedStyle(text)
      .getPropertyValue('height')
      .replace('px', '');

    if (visibleText < hiddenText) {
      setHasMore(true);
    } else {
      setHasMore(false);
    }

    return () => {
      window.removeEventListener('resize', resize);
    };
  }, [bodyWidth]);

  useEffect(() => {
    const getWidth = document.body.clientWidth;
    setBodyWidth(getWidth);
  }, []);

  return (
    <MainContainer>
      <TitleText>Description</TitleText>
      <DescriptionText showMore={isShowMore} ref={ref}>
        {text}
      </DescriptionText>
      {hasMore ? (
        <ShowMoreText onClick={toggleReadMore}>
          {isShowMore ? 'Show more...' : 'Show less'}
        </ShowMoreText>
      ) : null}
    </MainContainer>
  );
};

export default Description;

I guess, next.js was based on react.js – Anton Aug 02 '21 at 16:00 — Anton, Aug 02 '21 at 16:00

Hide Condition Text in ReactJS

2 Answers2