Tips for personalizing react-show-more text length with Material-UI Icons

In my SharePoint Framework webpart using React, I am currently utilizing the show more text controller. However, I am interested in replacing the "Show More" and "Show Less" string links with the ExpandMore and ExpandLess Material UI icons. Is there a way to achieve this customization?

<ShowMoreText
  /* Default options */
  lines={2}
  more="Show More"
  less="Show less"
  anchorClass=""
  onClick={this.executeOnClick}
  expanded={false}
>
  {item["description"]}
</ShowMoreText>

You can find more information about this at

javascripthtmlcssreactjsmaterial-ui

Answer №1

Procedure

To effectively implement this, pass the <Icon /> directly to the corresponding props.

<ShowMoreText
  more={<ExpandMore />}
  less={<ExpandLess />}
  ...
/>

Illustration

https://i.stack.imgur.com/hoED4.gif

Origin

import React, { useState } from "react";
import "./styles.css";
import ShowMoreText from "react-show-more-text";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";

export default function App() {
  const [expand, setExpand] = useState(false);
  const onClick = () => {
    setExpand(!expand);
  };
  const text = "12313131313131311";
  return (
    <div className="App">
      <ShowMoreText
        lines={2}
        more={<ExpandMore />}
        less={<ExpandLess />}
        onClick={onClick}
        expanded={expand}
        width={30}
      >
        {text}
      </ShowMoreText>
    </div>
  );
}

https://codesandbox.io/s/kind-tesla-pd525?fontsize=14&hidenavigation=1&theme=dark

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

No display of Tailwind updates on local server in Safari browser using NextJS and a Mac M1

For my personal project with NextJS, I am using Tailwind CSS, but I am experiencing frequent issues with updating styles. It seems like there is a 50/50 chance that Tailwind will apply the styles to the component properly, and sometimes I have to go throug ...

cssreactjsnext.jstailwind-css

What is the process of creating Vue.js single file components and incorporating them into a non-single page application?

Currently, I am in the process of developing a web application (specifically ASP.NET Core 2 MVC) that is not a single page application. Vue.js is being used to enhance the front-end functionality through a Vue instance. As the project progresses, there is ...

javascriptvue.jsvuejs2vue-component

"Using JavaScript to extract a portion of the URL and perform a redirect

I am attempting to extract a specific part of the URL and then redirect to that particular section. Essentially, what I want is for a script to generate a link that will be opened. This link would appear as . My goal now is to extract the portion of the ...

javascript

A comprehensive walkthrough on getting started with your project setup using Cordova, Onsen, and React - from setting up

Are there any comprehensive step-by-step guides available for creating an Onsen UI 2 + React + Redux + Cordova application from the ground up? While there are many resources out there, very few of them cover the initial project setup process: which npm pa ...

cordovareactjswebpackbabeljsmonaca

Executing a javascript file inside a jade document

I need help incorporating a JavaScript file into my Jade file so that it runs every time the page is accessed. How can I achieve this? Here is my current code snippet: doctype html html head title= title body h2 Bus Driver Locati ...

javascriptnode.jsexpresspug

substitute the character ""<0x00>"" within the given string

I'm currently facing an issue with a string I received after sending a command line that included the <0x00> character. How can I remove it from the string? For instance, here is my variable string: <0x00> awplus # desired output: awplus ...

javascriptnode.js

Tips for Removing Copyright on Charts

Check this out : https://jsfiddle.net/oscar11/4qdan7k7/5/ Is there a way to eliminate the phrase JS chart by amCharts? ...

javascriptjquerycharts

An effective method for transferring form input and music between pages utilizing JavaScript

I've been grappling with this issue for quite some time now. On the initial page, I have a form like this: <form id="user" name="user" method="GET" action="the-tell-tale-heart.html"> Name: <input type="text" name="name"> & ...

javascriptjqueryhtml

How can I extract text from HTML tags that contain nested HTML using C#?

<Item> </c>Text i need</c> </c>Text i need</c> </c>Text i need</c> </Item>Text i need</Item> </Item>Text i need</Item> </Item>Text i need</Item> </Item> i need to extract ...

c#htmltexttags

How can I remove the ID of the object data from the list?

When sending the data initially, there are no issues. However, when attempting to update, I am able to delete the root object's id but struggling to delete the ids of objects in the list. Any suggestions on what I can do? const handleSubmit = async ...

reactjstypescriptaxios

Scrolling the Ionic framework to a position below zero

My ion scroll is synchronized with another component for scrolling. I achieve this by using the function scroll1.scrollTo(left, top, false); Unfortunately, this function does not allow scrolling to a negative position, such as scroll1.scrollTo(left, -50, ...

javascriptangularjsionic-framework

What is the purpose of the Condition being executed in the screep tutorial?

Lately, I've been heavily focused on Python programming but recently delved into the realm of Screeps and Javascript. As part of a tutorial, there is this code snippet that moves a creep towards an energy source to harvest it: if(creep.store.getFreeC ...

javascriptscreeps

React Material UI Expansion Panel with disabled cursor pointer

Is there a way to only have the cursor hover effect on the ExpandIcon within the Material-ui expansion panel, without disabling it completely? For reference, here is the official documentation for the ExpansionPanel: https://material-ui.com/api/expansion- ...

reactjsmaterial-ui

Storing user input into a MySQL database with NodeJS and Express

Seeking assistance for a school project where I am required to input data from an HTML form into a database. The challenge lies in my lack of experience with NodeJS, Express, Handlebars, or JavaScript, making it difficult for me to comprehend the process. ...

htmlmysqlnode.jsexpresshandlebars.js

Expanding Text Area in AngularJS

I came across this directive and I want to integrate it into my project, but I need the text area to expand as soon as the content is loaded. Angular-Autogrow.js: (function(){ 'use strict'; angular.module('angular-autogrow', [ ...

javascriptjqueryangularjs

Why is the ionChange/ngModelChange function being triggered from an ion-checkbox even though I did not specifically call it?

I have an issue with my code involving the ion-datetime and ion-check-box. I want it so that when a date is selected, the checkbox should automatically be set to false. Similarly, if the checkbox is clicked, the ion-datetime value should be cleared. Link ...

javascriptangulartypescriptionic-framework

How do I define the specific icon to display on the splash screen for progressive web apps?

In my Progressive Web App (PWA), I have set icons at sizes 144 and 512. Although both icons appear in the application tab in Chrome, the splash screen displays a really small icon (I assume it's using the 144 icon). Is there a method to indicate which ...

javascriptprogressive-web-apps

Unlimited scrolling feature resembling Facebook and Tumblr created using jQuery

Below is the modified code from a tutorial found on hycus.com: <script type="text/javascript> var properlast = 10; $(window).scroll(function() { if($(window).scrollTop() == $(document).height() - $(window).height()) { $("div#load ...

javascriptjqueryajaxscroller

Tips for avoiding material-ui package from taking control of my app's styling?

I am currently using the most up-to-date installation of Material-UI on a React-Gatsby application. I recently integrated a third-party carousel package (react-material-ui-carousel) into my project. However, I have noticed that this carousel package is ca ...

reactjsmaterial-uiemotion

encountering an issue while working with Selenium on Google Colab

I'm attempting to perform web scraping with selenium in Google Colab and running into some errors The webpage is prompting me to enable JavaScript and disable any ad blockers. I tried enabling JavaScript by adding the following line of code: chrome_o ...

javascriptseleniumweb-scrapingselenium-chromedrivergoogle-colaboratory