Cuando estaba trabajando con contenido HTML que se mostraba con Leer más y Leer menos (Mostrar más o Mostrar menos) en mi página web, luché mucho buscando en Google para obtener una solución rápida. Desafortunadamente, no pude recopilar una sola fuente de la solución. Empecé a escribir mi propia solución y decidí compartir mi propia solución si ayuda a alguien.
Al principio, debe instalar "html-truncate"
npm i html-truncado
import React, {useState, useCallback, useEffect} from 'react'; import truncate from "truncate-html"; const ReadMoreMaster = (props) => { let {byWords,parentClass, readLess, readMore, length, ellipsis, spaceBefore} = props; const [showMore, setShowMore] = useState(false); truncate.setup({ byWords: !!byWords, ellipsis: ellipsis ? ellipsis : '', }) const [state, setState] = useState({ showRealData: false, realData: props.children, truncatedData: truncate(props.children, length ? length : 2) }); const handleShowData = useCallback(() => { setState(prevState => ({ ...prevState, showRealData: !prevState.showRealData })); }, [setState]); useEffect(() => { if(byWords && props.children) { const textDetails = props.children.replace(/<[^>]+>/g, ''); const arr = textDetails.split(" "); if(arr.length > length) { setShowMore(true); } } }, [byWords]) return ( <div className={parentClass}> <div dangerouslySetInnerHTML={{ __html: `${ !state.showRealData ? state.truncatedData : state.realData }` }} /> {spaceBefore === false ? '' : ' '} { showMore && <a href={void (0)} className="read-more" onClick={handleShowData}> {!state.showRealData ? readMore ? readMore : 'Read More' : readLess ? readLess : 'Read Less'} </a> } </div> ); }; export default ReadMoreMaster;Ahora llame al componente como se muestra a continuación:
<ReadMoreMaster byWords={true} length={150} ellipsis="..." > <p>your content with or without HTML tag</p> </ReadMoreMaster>Los accesorios compatibles son:
// ...Supported Props... // parentClass="test" || default value : null // byWords={true} || default value : false // ellipsis="..." || default value : null // length={5} || default value : 2 // readMore="See More" || default value : Read More // readLess="See less" || default value : Read Less // spaceBefore={false} || default value : true
Todo listo. ¡¡¡Disfrutar!!!