A simple react hook for expandable text
npm install react-hook-showmorebash
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 && (
)}
);
};
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 && (
)}
))}
);
};
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. |