{"_id":"@bongione/react-truncate","_rev":"2-b6ca80fa4924645ae29509fe041bd494","name":"@bongione/react-truncate","description":"React component for truncating multi-line spans and adding an ellipsis","dist-tags":{"latest":"2.3.2"},"versions":{"2.3.1":{"name":"@bongione/react-truncate","version":"2.3.1","description":"React component for truncating multi-line spans and adding an ellipsis","main":"lib/Truncate.CommonJS.js","module":"lib/Truncate.js","files":["lib"],"scripts":{"compile":"mkdir lib; babel ./src --out-file ./lib/Truncate.js && BABEL_ENV=CommonJS babel ./src --out-file ./lib/Truncate.CommonJS.js","coverage":"nyc npm test && nyc report --reporter=text-lcov","lint":"eslint .","prepublish":"rm -rf ./lib && npm run compile","preversion":"npm run test","report-coverage":"npm run coverage | coveralls","test":"BABEL_ENV=test mocha --require babel-polyfill --require babel-core/register","travis":"npm run lint && npm run compile && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/One-com/react-truncate.git"},"homepage":"https://github.com/One-com/react-truncate","keywords":["react","truncate","ellipsis","multiline"],"author":{"name":"Pablo Sichert","email":"kps@one.com"},"license":"ISC","peerDependencies":{"prop-types":"<= 15.x.x","react":"<= 16.x.x"},"devDependencies":{"babel-cli":"^6.26.0","babel-eslint":"^8.0.1","babel-plugin-syntax-async-functions":"^6.13.0","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","canvas":"^1.6.7","common-tags":"^1.4.0","coveralls":"^3.0.0","eslint":"^4.8.0","eslint-config-onelint":"^2.0.0","eslint-config-onelint-react":"^2.0.1","eslint-plugin-react":"^7.4.0","jsdom":"^11.3.0","mocha":"^4.0.1","nyc":"^11.2.1","prop-types":"^15.6.0","raf":"^3.4.0","react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0","sinon":"^4.0.1","unexpected":"^10.36.0","unexpected-dom":"^4.0.0","unexpected-react":"^5.0.0","unexpected-sinon":"^10.8.2"},"gitHead":"c16d7e23453f22225e07a6b587014bcfbafa3523","bugs":{"url":"https://github.com/One-com/react-truncate/issues"},"_id":"@bongione/react-truncate@2.3.1","_npmVersion":"5.5.1","_nodeVersion":"8.6.0","_npmUser":{"name":"bongione","email":"paolo.bongiovanni@mindiply.com"},"dist":{"integrity":"sha512-S1iND2LXNGwIusQcIEf0S5o9em0+qB6T6VksT+TDpW4jAeI9VCKX5lUquavTbDTIZR5SkN3jOYpAqSaZ8ARGmA==","shasum":"d19b9280e179a8d966942478e1df0dbadb6e22a6","tarball":"https://registry.npmjs.org/@bongione/react-truncate/-/react-truncate-2.3.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWxZ0W8Ii1Bjl7WTD/L3hm8vpd9SkKje0evBWjEBpdDQIgSiiM3MJs7Bijr3Q76EE4LF5Q6K7jn799bbSt+kUslU4="}]},"maintainers":[{"name":"bongione","email":"paolo.bongiovanni@mindiply.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-truncate-2.3.1.tgz_1512644679572_0.500401979777962"},"directories":{}},"2.3.2":{"name":"@bongione/react-truncate","version":"2.3.2","description":"React component for truncating multi-line spans and adding an ellipsis","main":"lib/Truncate.CommonJS.js","module":"lib/Truncate.js","scripts":{"compile":"mkdir lib; babel ./src --out-file ./lib/Truncate.js && BABEL_ENV=CommonJS babel ./src --out-file ./lib/Truncate.CommonJS.js","coverage":"nyc npm test && nyc report --reporter=text-lcov","lint":"eslint .","prepublish":"rm -rf ./lib && npm run compile","preversion":"npm run test","report-coverage":"npm run coverage | coveralls","test":"BABEL_ENV=test mocha --require babel-polyfill --require babel-core/register","travis":"npm run lint && npm run compile && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/One-com/react-truncate.git"},"homepage":"https://github.com/One-com/react-truncate","keywords":["react","truncate","ellipsis","multiline"],"author":{"name":"Pablo Sichert","email":"kps@one.com"},"license":"ISC","peerDependencies":{"prop-types":"<= 15.x.x","react":"<= 16.x.x"},"devDependencies":{"babel-cli":"^6.26.0","babel-eslint":"^8.0.1","babel-plugin-syntax-async-functions":"^6.13.0","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","canvas":"^1.6.7","common-tags":"^1.4.0","coveralls":"^3.0.0","eslint":"^4.8.0","eslint-config-onelint":"^2.0.0","eslint-config-onelint-react":"^2.0.1","eslint-plugin-react":"^7.4.0","jsdom":"^11.3.0","mocha":"^4.0.1","nyc":"^11.2.1","prop-types":"^15.6.0","raf":"^3.4.0","react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0","sinon":"^4.0.1","unexpected":"^10.36.0","unexpected-dom":"^4.0.0","unexpected-react":"^5.0.0","unexpected-sinon":"^10.8.2"},"gitHead":"569e459dced0e4d1347622aaf5c9396f80b6b50d","bugs":{"url":"https://github.com/One-com/react-truncate/issues"},"_id":"@bongione/react-truncate@2.3.2","_npmVersion":"6.4.1","_nodeVersion":"9.11.1","_npmUser":{"name":"bongione","email":"paolo.bongiovanni@mindiply.com"},"dist":{"integrity":"sha512-msETtnYPgVye0HoC6gLFqNIH8nWvC/wU/qcFPrXtiAOqw/fQvUW/Xwu9IitgOxkNPI6USMADYelTRhTh9p0EuQ==","shasum":"002e3c9c51df053a440e4c94e51870b2bd000ebe","tarball":"https://registry.npmjs.org/@bongione/react-truncate/-/react-truncate-2.3.2.tgz","fileCount":5,"unpackedSize":39577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrgMjCRA9TVsSAnZWagAA3HkQAKS2T8MB1W08/NDJS41A\ns57aI28/1CxrGCdRyQ6D+CkUjzIwqj9U121l2ghCHmrEqfjESRKgLUZ+7S/g\nYR+EU4ZPyHHCwvJEOWWneo3CjrKtbnIOsNXuzsMr7uiV6ThuSagLVcX6Q10o\nYI90TPLpwqwOQOeZpW6NzyPLCKd75jVeK++2RIrEXOVzdrMAmG+Onw5ih7FA\nJtPJX2N/bRTQ8IZcAnheKoL+VsNUHFM9TRe17dl0Di65+Jp/gsQjImT6QrPF\nKhmF8ny6rm6jsfLFUYnAPssFwzgh/KnVRI1E5QEVOSrSeO4yb2yb3r25gePG\nUzCuW91dhQCJJ5IILeMxZpqI67pb2uhmvu0yXnB1efCryzddWaUz6NJMqbDG\n3Raw9cG+zbZklImvZw7PDH8oLl9ovJ52vr+h/R3V0o124Nfhe3vhEmbxhbdp\nLl5JHdUYu5U4B1Ets5rN4oE9q89YL3Bru4rEWmSjm532ZDiD6rqTreS6Z11f\n+3ejLeb1gtqQt4/aS6frLORPUSSqQC5od5098FVLHOe6r71MdjDLLPwjEphb\nx8JgSqHIQA5C5GiOvdOPSXR0U8/KDVUNBuk+y0O2lpEo0ipIl+O/IyFD741r\njGhgbKIuZAvs8z+nCPr1ok+hkrLLPx5pKor3es4AOeSPNSLcrUXAJ+9fVW6x\n2Od2\r\n=N9TO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGA2RppHT+gb0JyeiVe9MXhjwFH4Zx6eKWgS9oc2FYBAiEA+bTwxA3gTSfbaxQkhmsQel1IGaghlBzMqNsww6Zz+Zs="}]},"maintainers":[{"name":"bongione","email":"paolo.bongiovanni@mindiply.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-truncate_2.3.2_1538130723290_0.34477230557485594"},"_hasShrinkwrap":false}},"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            <Truncate lines={3} ellipsis={<span>... <a href='/link/to/article'>Read more</a></span>}>\n                {longText}\n            </Truncate>\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) => {\n        const line = <span key={i}>{line}</span>;\n\n        if (i === arr.length - 1) {\n            return line;\n        } else {\n            return [line, <br key={i + 'br'} />];\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 < 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. | `'...'`, `<span>...</span>`, `<span>... <a href='#' onClick={someHandler}>Read more</a></span>`, `[<span key='some'>Some</span>, <span key='siblings'>siblings<span>]`\n| children | string, React node | | The text to be truncated. Anything that can be evaluated as text. | `'Some text'`, `<p>Some paragraph <a/>with other text-based inline elements<a></p>`, `<span>Some</span><span>siblings</span>` |\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 => isTruncated !== this.state.isTruncated && this.setState({ isTruncated })` |\n| trimWhitespace | boolean | false | If `true`, whitespace will be removed from before the ellipsis (e.g. `words ...` will become `words...` instead) | `<Truncate trimWhitespace>{longText}</Truncate>` |\n\n## Known issues\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            <div>\n                <Truncate\n                    lines={!expanded && lines}\n                    ellipsis={(\n                        <span>... <a href='#' onClick={this.toggleLines}>{more}</a></span>\n                    )}\n                    onTruncate={this.handleTruncate}\n                >\n                    {children}\n                </Truncate>\n                {!truncated && expanded && (\n                    <span> <a href='#' onClick={this.toggleLines}>{less}</a></span>\n                )}\n            </div>\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    text: PropTypes.node,\n    lines: PropTypes.number\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/One-com/react-truncate\n[travis-image]:https://travis-ci.org/One-com/react-truncate.svg?branch=master\n[coveralls-url]:https://coveralls.io/r/One-com/react-truncate\n[coveralls-image]:https://coveralls.io/repos/One-com/react-truncate/badge.svg\n[david-dm-url]:https://david-dm.org/One-com/react-truncate\n[david-dm-image]:https://david-dm.org/One-com/react-truncate.svg\n[david-dm-dev-url]:https://david-dm.org/One-com/react-truncate#info=devDependencies\n[david-dm-dev-image]:https://david-dm.org/One-com/react-truncate/dev-status.svg\n","maintainers":[{"name":"bongione","email":"paolo.bongiovanni@mindiply.com"}],"time":{"modified":"2022-04-04T20:06:13.565Z","created":"2017-12-07T11:04:40.630Z","2.3.1":"2017-12-07T11:04:40.630Z","2.3.2":"2018-09-28T10:32:03.445Z"},"homepage":"https://github.com/One-com/react-truncate","keywords":["react","truncate","ellipsis","multiline"],"repository":{"type":"git","url":"git+ssh://git@github.com/One-com/react-truncate.git"},"author":{"name":"Pablo Sichert","email":"kps@one.com"},"bugs":{"url":"https://github.com/One-com/react-truncate/issues"},"license":"ISC","readmeFilename":"README.md"}