React-hook-showmore NPM

🌟 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.