{"id":20772875,"url":"https://github.com/101loop/showmoreless-react","last_synced_at":"2025-04-30T15:06:59.992Z","repository":{"id":57375372,"uuid":"437058549","full_name":"101Loop/ShowMoreLess-React","owner":"101Loop","description":null,"archived":false,"fork":false,"pushed_at":"2021-12-19T10:13:49.000Z","size":925,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-12-22T18:01:29.528Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/101Loop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-10T17:19:34.000Z","updated_at":"2021-12-19T10:13:52.000Z","dependencies_parsed_at":"2022-09-05T13:21:12.835Z","dependency_job_id":null,"html_url":"https://github.com/101Loop/ShowMoreLess-React","commit_stats":null,"previous_names":[],"tags_count":1,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/101Loop%2FShowMoreLess-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/101Loop%2FShowMoreLess-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/101Loop%2FShowMoreLess-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/101Loop%2FShowMoreLess-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/101Loop","download_url":"https://codeload.github.com/101Loop/ShowMoreLess-React/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225035973,"owners_count":17410789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T12:23:22.320Z","updated_at":"2024-11-17T12:23:22.858Z","avatar_url":"https://github.com/101Loop.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ShowMoreLess\n\n\u003e React library to manage long paragraphs\n\n[![NPM](https://img.shields.io/npm/v/show-more-less.svg)](https://www.npmjs.com/package/show-more-less) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save show-more-less\n```\n\n## Usage\n\n```tsx\nimport React, { useState } from 'react'\nimport styles from './ShowMoreLess.module.scss'\nimport ShowMoreLess from 'show-more-less'\nimport 'show-more-less/dist/index.css'\n\nfunction Example() {\n  const text =\n    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dolores, cumque tenetur omnis debitis eligendi illum adipisci. Amet, ex soluta. Consequatur ab minus voluptates illum exercitationem, repellat perferendis iure possimus.'\n\n  const [expanded, setExpanded] = useState(false)\n\n  return (\n    \u003cShowMoreLess\n      text={text}\n      threshold={800}\n      expanded={expanded}\n      onExpand={setExpanded}\n      classes={{\n        root: styles.root,\n        text: styles.text,\n        clickable: styles.clickable\n      }}\n    /\u003e\n  )\n}\n\nexport default Example\n```\n\n## Table of contents\n\n### Type aliases\n\n- [ClassesObject](#classesobject)\n- [OnExpand](#onexpand)\n- [ShowMoreLessProps](#showmorelessprops)\n\n## Type aliases\n\n### ClassesObject\n\n#### Type declaration\n\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `clickable?` | string | style class at the show more/less text level |\n| `root?` | string | style class at the root level |\n| `text?` | string | style class at the text level |\n\n___\n\n### OnExpand\n\n#### Type declaration\n\n▸ (`value`): void\n\n##### Parameters\n\n| Name | Type | Description |\n| :------ | :------ | :------ |\n| `value` | boolean | This is the updated value, passed as a param |\n\n##### Returns\n\nvoid\n\n___\n\n### ShowMoreLessProps\n\n#### Type declaration\n\n| Name | Type | Description | Default |\n| :------ | :------ | :------ | :------ |\n| `classes?` | ClassesObject | an optional ClassesObject, for style | - |\n| `expanded?` | boolean | determines whether the text is expanded or not | false |\n| `onExpand?` | OnExpand | a callback function called on clicking show more/less text | - |\n| `showLessLabel?` | string | label text for show more | ...Show More |\n| `showMoreLabel?` | string | label text for show less | Show Less |\n| `text` | string | text to be shown | - |\n| `threshold?` | number | a point after which the text will be trimmed | 100 |\n\n## License\n\nMIT © [iamdipanshusingh](https://github.com/iamdipanshusingh)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F101loop%2Fshowmoreless-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F101loop%2Fshowmoreless-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F101loop%2Fshowmoreless-react/lists"}