🌟 react-hook-showmore

react-hook-showmore react-hook-showmore is a custom React Hook that allows you to display text of limited length and provides a "Show More" button option to expand the text. This hook can be used multiple times in a single component with different keys, perfect for displaying multiple texts that can be expanded independently.

🔧 Feature

• ✅ Support Multiple Texts in One Component – Each text can have its own expansion status with a unique key.
• ✅ Toggle Expand/Collapse – Allows the user to expand or hide the text back.
• ✅ Lightweight & Performance – Built without additional dependencies.
• ✅ Easy to use – With just a few lines of code.

📦 Installation

npm install react-hook-showmore

pnpm install react-hook-showmore

yarn add react-hook-showmore

🚀 Basic Usage

import React from "react";
import { useShowMore } from "react-hook-showmore";

const ExampleComponent = () => {
  const { isExpanded, toggleExpansion, getDisplayText } = useShowMore();

  const content =
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";

  return (
    <div>
      <p>
        {getDisplayText("desc", content, 50)}
        {content.lenght > 50 && (
          <button type="button" onClick={() => toggleExpansion("desc")}>
            {isExpanded["desc"] ? "Show Less" : "Show More"}
          </button>
        )}
      </p>
    </div>
  );
};

export default ExampleComponent;

🚀 Multiple Usage

import React from "react";
import { useShowMore } from "react-hook-showmore";

const ExampleComponent = () => {
  const { isExpanded, toggleExpansion, getDisplayText } = useShowMore();

  const items = [
    {
      key: "item1",
      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.",
    },
    {
      key: "item2",
      text: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.",
    },
    {
      key: "item3",
      text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.",
    },
  ];

  return (
    <div>
      {items.map(({ key, text }) => (
        <div key={key} style={{ marginBottom: "10px" }}>
          <p>
            {getDisplayText(key, text, 50)}
            {text.lenght > 50 && (
              <button type="button" onClick={() => toggleExpansion(key)}>
                {isExpanded[key] ? "Show Less" : "Show More"}
              </button>
            )}
          </p>
        </div>
      ))}
    </div>
  );
};

export default ExampleComponent;

📚 API Reference

🔹 useShowMore()

useShowMore() return 3 main properties:

| Property | Type | Description | | ----------------- | ----------------------------------------------------------- | ----------------------------------------------------------------- | | isExpanded | Record<string, boolean> | An object that stores the expansion status based on a unique key. | | toggleExpansion | (key: string) => void | Function to change expansion status based on certain key. | | getDisplayText | (key: string, content: string, length?: number) => string | Function to get truncated text if it has not been expanded. |

📌 Parameter Explanation getDisplayText

| Parameter | Type | Description | | --------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | key | string | Key unique which is used to store the expansion status of a particular text. For example, if there are multiple texts in a single component, each text should have a different key. | | content | string | Text which you want to display with the "Show More" option. | | length (opsional) | number | Maximum length of text before truncation. Default: 100. If text is shorter than length, it will be displayed in full. |

🎗️ Support

If this library is useful to you, please consider supporting me by buying a coffee!☕