{"id":13394524,"url":"https://github.com/pablosichert/react-truncate","last_synced_at":"2025-05-16T03:06:51.910Z","repository":{"id":40491406,"uuid":"58549056","full_name":"pablosichert/react-truncate","owner":"pablosichert","description":"React component for truncating multi-line spans and adding an ellipsis.","archived":false,"fork":false,"pushed_at":"2023-01-24T15:04:39.000Z","size":531,"stargazers_count":590,"open_issues_count":53,"forks_count":129,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-07T14:05:21.304Z","etag":null,"topics":["clip","ellipsis","react","truncate"],"latest_commit_sha":null,"homepage":"https://www.webpackbin.com/bins/-Kw6QnAkjmv1OD6Of-ZD","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pablosichert.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-11T13:49:42.000Z","updated_at":"2025-03-29T12:28:05.000Z","dependencies_parsed_at":"2023-02-13T22:45:21.254Z","dependency_job_id":null,"html_url":"https://github.com/pablosichert/react-truncate","commit_stats":null,"previous_names":["one-com/react-truncate"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablosichert%2Freact-truncate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablosichert%2Freact-truncate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablosichert%2Freact-truncate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablosichert%2Freact-truncate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pablosichert","download_url":"https://codeload.github.com/pablosichert/react-truncate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459088,"owners_count":22074605,"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":["clip","ellipsis","react","truncate"],"created_at":"2024-07-30T17:01:22.586Z","updated_at":"2025-05-16T03:06:46.901Z","avatar_url":"https://github.com/pablosichert.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React-Truncate\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][npm-url]\n[![Build status][travis-image]][travis-url]\n[![Coverage status][coveralls-image]][coveralls-url]\n[![Dependency status][david-dm-image]][david-dm-url]\n[![Dev dependency status][david-dm-dev-image]][david-dm-dev-url]\n\n## Install\n```\n$ npm install react-truncate\n```\n\n## Usage\n```js\nimport Truncate from 'react-truncate';\n\n// ...\n\nclass Foo extends Component {\n    render() {\n        return (\n            \u003cTruncate lines={3} ellipsis={\u003cspan\u003e... \u003ca href='/link/to/article'\u003eRead more\u003c/a\u003e\u003c/span\u003e}\u003e\n                {longText}\n            \u003c/Truncate\u003e\n        );\n    }\n}\n```\n\nHint: (Generally with React) if you want to preserve newlines from plain text, you need to do as follows:\n```js\n//...\n    {text.split('\\n').map((line, i, arr) =\u003e {\n        const line = \u003cspan key={i}\u003e{line}\u003c/span\u003e;\n\n        if (i === arr.length - 1) {\n            return line;\n        } else {\n            return [line, \u003cbr key={i + 'br'} /\u003e];\n        }\n    })}\n//...\n```\n\n## API\n| Prop | Type | Default | Description | Example |\n| ---- | ---- | ------- | ----------- | ------- |\n| lines | integer, boolean {false} | `1` | Specifies how many lines of text should be preserved until it gets truncated. `false` and any integer \u003c 1 will result in the text not getting clipped at all. | (`false`, `-1`, `0`), `1`, ...  |\n| ellipsis | string, React node | `'…'` | An ellipsis that is added to the end of the text in case it is truncated. | `'...'`, `\u003cspan\u003e...\u003c/span\u003e`, `\u003cspan\u003e... \u003ca href='#' onClick={someHandler}\u003eRead more\u003c/a\u003e\u003c/span\u003e`, `[\u003cspan key='some'\u003eSome\u003c/span\u003e, \u003cspan key='siblings'\u003esiblings\u003cspan\u003e]`\n| children | string, React node | | The text to be truncated. Anything that can be evaluated as text. | `'Some text'`, `\u003cp\u003eSome paragraph \u003ca/\u003ewith other text-based inline elements\u003ca\u003e\u003c/p\u003e`, `\u003cspan\u003eSome\u003c/span\u003e\u003cspan\u003esiblings\u003c/span\u003e` |\n| trimWhitespace | boolean | `false` | If `true`, whitespace will be removed from before the ellipsis (e.g. `words ...` will become `words...` instead) | |\n| width | number | `0` | If not `0`, the calculation of the content will be based on this number. | |\n| onTruncate | function | | Gets invoked on each render. Gets called with `true` when text got truncated and ellipsis was injected, and with `false` otherwise. | `isTruncated =\u003e isTruncated !== this.state.isTruncated \u0026\u0026 this.setState({ isTruncated })` |\n\n## Known issues\n- Resize content when the **size** of **parent container changed** (use the `width` property or call `ref.onResize()`). See [issue](https://github.com/One-com/react-truncate/issues/49)\n- Text exceeding horizontal boundaries when \"viewport\" meta tag is not set accordingly for **mobile** devices (font boosting leads to **wrong calculations**). See [issue](https://github.com/One-com/react-truncate/issues/4#issuecomment-226703499)\n- Output in plain text only - no support for **markup/HTML**. See [issue](https://github.com/One-com/react-truncate/issues/8)\n- Wrong line breaks when **custom font** is loading after the component has rendered. See [issue](https://github.com/One-com/react-truncate/issues/16)\n- No support for **letter spacing** / **word spacing**. See [issue](https://github.com/One-com/react-truncate/issues/59)\n\n## Integrated example for toggling \"read more\" text\n```js\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Truncate from 'react-truncate';\n\nclass ReadMore extends Component {\n    constructor(...args) {\n        super(...args);\n\n        this.state = {\n            expanded: false,\n            truncated: false\n        };\n\n        this.handleTruncate = this.handleTruncate.bind(this);\n        this.toggleLines = this.toggleLines.bind(this);\n    }\n\n    handleTruncate(truncated) {\n        if (this.state.truncated !== truncated) {\n            this.setState({\n                truncated\n            });\n        }\n    }\n\n    toggleLines(event) {\n        event.preventDefault();\n\n        this.setState({\n            expanded: !this.state.expanded\n        });\n    }\n\n    render() {\n        const {\n            children,\n            more,\n            less,\n            lines\n        } = this.props;\n\n        const {\n            expanded,\n            truncated\n        } = this.state;\n\n        return (\n            \u003cdiv\u003e\n                \u003cTruncate\n                    lines={!expanded \u0026\u0026 lines}\n                    ellipsis={(\n                        \u003cspan\u003e... \u003ca href='#' onClick={this.toggleLines}\u003e{more}\u003c/a\u003e\u003c/span\u003e\n                    )}\n                    onTruncate={this.handleTruncate}\n                \u003e\n                    {children}\n                \u003c/Truncate\u003e\n                {!truncated \u0026\u0026 expanded \u0026\u0026 (\n                    \u003cspan\u003e \u003ca href='#' onClick={this.toggleLines}\u003e{less}\u003c/a\u003e\u003c/span\u003e\n                )}\n            \u003c/div\u003e\n        );\n    }\n}\n\nReadMore.defaultProps = {\n    lines: 3,\n    more: 'Read more',\n    less: 'Show less'\n};\n\nReadMore.propTypes = {\n    children: PropTypes.node.isRequired,\n    lines: PropTypes.number,\n    less: PropTypes.string,\n    more: PropTypes.string\n};\n\nexport default ReadMore;\n```\n\n## Developing\nInstall system libraries needed for development dependencies\n- https://github.com/Automattic/node-canvas#installation\n\nInstall development dependencies\n```\n$ npm install\n```\n\nRun tests\n```\n$ npm test\n```\n\nRun code linter\n```\n$ npm run lint\n```\n\nCompile to ES5 from /src to /lib\n```\n$ npm run compile\n```\n\n[npm-url]:https://npmjs.org/package/react-truncate\n[downloads-image]:http://img.shields.io/npm/dm/react-truncate.svg\n[npm-image]:https://badge.fury.io/js/react-truncate.svg\n[travis-url]:https://travis-ci.org/pablosichert/react-truncate\n[travis-image]:https://travis-ci.org/pablosichert/react-truncate.svg?branch=master\n[coveralls-url]:https://coveralls.io/r/pablosichert/react-truncate\n[coveralls-image]:https://coveralls.io/repos/pablosichert/react-truncate/badge.svg\n[david-dm-url]:https://david-dm.org/pablosichert/react-truncate\n[david-dm-image]:https://david-dm.org/pablosichert/react-truncate.svg\n[david-dm-dev-url]:https://david-dm.org/pablosichert/react-truncate#info=devDependencies\n[david-dm-dev-image]:https://david-dm.org/pablosichert/react-truncate/dev-status.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpablosichert%2Freact-truncate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpablosichert%2Freact-truncate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpablosichert%2Freact-truncate/lists"}