🌟 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

``bash
npm install react-hook-showmore

pnpm install react-hook-showmore

yarn add react-hook-showmore
`

🚀 Basic Usage

`js
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 (

{getDisplayText("desc", content, 50)}
{content.lenght > 50 && (
toggleExpansion("desc")}>
{isExpanded["desc"] ? "Show Less" : "Show More"}

)}

);
};

export default ExampleComponent;
`

🚀 Multiple Usage

`js
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 (

{items.map(({ key, text }) => (

{getDisplayText(key, text, 50)}
{text.lenght > 50 && (
toggleExpansion(key)}>
{isExpanded[key] ? "Show Less" : "Show More"}

)}

))}

);
};

export default ExampleComponent;
`

---

📚 API Reference

$3

useShowMore() return 3 main properties:

| Property | Type | Description |
| ----------------- | ----------------------------------------------------------- | ----------------------------------------------------------------- |
| isExpanded | Record | 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!☕