React Component To readMore and readLess Content

in this tutorial, we’ll let you know how to create a read-more component using react 17. The content will hide and show using read-more and read-less links.

Sometimes, we have the number of stories and each story has an excessive amount of details. I’ll learn here how to add ‘Read more’ link on each story or description.

Here, I’ll create “Read More…” link and if the user is interested then he can click on more links and see the full content.

The descriptions on the dashboard page are too long, and I can’t figure out how to make them shorter.

In many stories, if the description text is longer than a few characters, a show more link will be displayed to the user, revealing further words.

I am using the below libs:

• Material ui: optional
• React 17: I am using usestate hooks

Checkout Other tutorials:

• Create A Dynamic ‘Read More’ Link Using PHP
• jQuery Add More or Less Link into Paragraph

Create “Read More..” Component Using React

Let’s start the implementation of read more component using react.

Create a ReadMore.js file and added below the code:

import React,{useState} from 'react';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

const ReadMore = ({ description, limit }) => {
    const [showAll, setShowAll] = useState(false);
    return (
      <Typography>
        {description.length > limit ? (
          <div>
            {showAll ? (
              <div>
                {description}
                <Button size="small"
                  onClick={() => setShowAll(false)}
                  className="text-primary"
                >
                  Read Less
                </Button>
              </div>
            ) : (
              <div>
                {description.substring(0, limit).concat("...")}
                <Button size="small" onClick={() => setShowAll(true)} className="text-primary">
                  Read More
                </Button>
              </div>
            )}
          </div>
        ) : (
          description
        )}
      </Typography>
    );
  };
  export default ReadMore;

How To Use readmore react Component

Let’s call Readmore component into our component where we need to show readmore and lessmore.

<Grid item xs={12}>           
 <Typography className="sublabel" display="inline">Description:</Typography>             
 <ReadMore description={alert.Detail.eventDescription[0].latestDescription} limit={150}/>          
</Grid>

Option 2: Toggle Between “read more” and “read less” content

React component that allows you to toggle between “read more” and “read less” content:

import React, { useState } from "react";

const ReadMore = ({ text }) => {
  const [isReadMore, setIsReadMore] = useState(true);

  const toggleReadMore = () => {
    setIsReadMore(!isReadMore);
  };

  return (
    <p>
      {isReadMore ? text.slice(0, 100) : text}
      <span onClick={toggleReadMore}>
        {isReadMore ? "...Read more" : " Read less"}
      </span>
    </p>
  );
};

export default ReadMore;

in the above component, we’re using the react useState hook to manage the state of our “read more” toggle. The isReadMore state, which controls whether we should show the entire text or simply the first 100 characters, is toggled by the toggleReadMore() function.

In the return statement, we’re also displaying a clickable “Read more” or “Read less” text depending on the current state, which triggers the toggleReadMore() function when clicked.

How To Use This Component

You can import it into another component and pass in the text you want to display as a prop:

import React from "react";
import ReadMore from "./ReadMore";

const App = () => {
  const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique consequat odio, eget eleifend sapien ultrices id. Sed nec laoreet lectus. Sed pellentesque quam vel felis imperdiet semper. Ut tincidunt vel ipsum sed convallis. Aenean volutpat sapien vel leo scelerisque, non blandit nisl tristique. Sed varius nulla ac ipsum venenatis, ac facilisis turpis sodales. Vivamus vitae arcu luctus, sollicitudin libero in, suscipit ipsum. Pellentesque consectetur lorem elit, nec fermentum velit pellentesque a.`;

  return (
    <div>
      <ReadMore text={text} />
    </div>
  );
};

export default App;

As you can see from the above code, We have passed the text variable as a prop to the ReadMore component.