list-view-details/dist/components/ShowMore/ShowMore.js

A highly customizable List View Details component for React applications. This package provides an efficient and flexible way to display data in a detailed, organized, and user-friendly list view.

import React, { useState } from 'react';
var ShowMore = function (_a) {
    var text = _a.text;
    var _b = useState(false), isExpanded = _b[0], setIsExpanded = _b[1];
    // const isExpanded = false;
    // Define the maximum number of characters to show when not expanded
    var maxCharacters = 100;
    // Function to toggle the expanded state
    var toggleExpanded = function () {
        console.log(!isExpanded);
        setIsExpanded(!isExpanded);
    };
    return (React.createElement("div", { className: "" },
        React.createElement("p", { className: "text-gray-700" }, isExpanded ? text : "".concat(text.substring(0, maxCharacters), "...")),
        React.createElement("button", { className: "text-blue-500 hover:underline focus:outline-none", onClick: toggleExpanded }, text.length < 100 ? '' : isExpanded ? 'Show Less' : 'Show More')));
};
export default ShowMore;