{"_id":"@ataverascrespo/react18-ts-textfit","name":"@ataverascrespo/react18-ts-textfit","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ataverascrespo/react18-ts-textfit","version":"1.0.0","description":"Updated for React 18 and TypeScript; a React component to fit headlines and paragraphs into any element.","main":"lib/index.js","scripts":{"clean":"rimraf lib dist","build":"babel src --out-dir lib","lint":"eslint src test examples","test":"NODE_ENV=test mocha --compilers js:babel-core/register --recursive","test:watch":"NODE_ENV=test mocha --compilers js:babel-core/register --recursive --watch","prepublish":"npm run lint && npm run test && npm run clean && npm run build"},"repository":{"type":"git","url":"git+https://github.com/ataverascrespo/react18-ts-textfit.git"},"keywords":["textfit","fittext","text","react","react-component"],"author":{"name":"Malte Wessel"},"license":"MIT","bugs":{"url":"https://github.com/ataverascrespo/react18-ts-textfit.git"},"homepage":"https://github.com/ataverascrespo/react18-ts-textfit.git","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-eslint":"^4.1.5","babel-loader":"^8.2.5","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","eslint":"^8.19.0","eslint-config-airbnb":"^19.0.4","eslint-plugin-react":"^7.30.1","expect":"^28.1.1","mocha":"^10.0.0","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^3.0.2","webpack":"^5.73.0","webpack-dev-server":"^4.9.3"},"peerDependencies":{"react":"^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0","react-dom":"^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"},"dependencies":{"process":"^0.11.10","prop-types":"^15.8.1"},"gitHead":"e8be2c03f5be0d469eaa857eb872e97418328b82","_id":"@ataverascrespo/react18-ts-textfit@1.0.0","_nodeVersion":"18.16.1","_npmVersion":"9.7.2","dist":{"integrity":"sha512-ZCFBhjxwS8STex8k/kEQd38pVdhSWZyW8oqr52OP0ia25JFiZCq9SnEkSbRVoJId1w7XpFhf/pNu50uaIRRh9w==","shasum":"5676ad96df016da6607f7aadc1cee2a99d45d2b5","tarball":"https://registry.npmjs.org/@ataverascrespo/react18-ts-textfit/-/react18-ts-textfit-1.0.0.tgz","fileCount":19,"unpackedSize":20883,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCf/iiQBCZkHCBpEk39eY5MwIxvVc1gjbypIytCll5vjAIgDu+5h7Sf48SifS3OSTEuN53unN+XVfHx+jta2b1epx0="}]},"_npmUser":{"name":"ataverascrespo","email":"alexmanuelt@hotmail.com"},"directories":{},"maintainers":[{"name":"ataverascrespo","email":"alexmanuelt@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react18-ts-textfit_1.0.0_1714487400158_0.8116212133809164"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-30T14:30:00.036Z","1.0.0":"2024-04-30T14:30:00.338Z","modified":"2024-04-30T14:30:00.665Z"},"maintainers":[{"name":"ataverascrespo","email":"alexmanuelt@hotmail.com"}],"description":"Updated for React 18 and TypeScript; a React component to fit headlines and paragraphs into any element.","homepage":"https://github.com/ataverascrespo/react18-ts-textfit.git","keywords":["textfit","fittext","text","react","react-component"],"repository":{"type":"git","url":"git+https://github.com/ataverascrespo/react18-ts-textfit.git"},"author":{"name":"Malte Wessel"},"bugs":{"url":"https://github.com/ataverascrespo/react18-ts-textfit.git"},"license":"MIT","readme":"@ataverascrespo/react18-ts-textfit\r\n=========================\r\n\r\n* New version of the react-textfit package, updated for React 18 and TypeScript by **[Alex Taveras-Crespo](https://alextaverascrespo.com/)**\r\n* Fit **headlines and paragraphs** into any element by using binary search to find the correct fit\r\n\r\n## Installation\r\n```bash\r\nnpm install @ataverascrespo/react18-ts-textfit\r\n```\r\n\r\n## Usage\r\n\r\n### Props\r\n* ```mode``` - \"single\" | \"multi\" **(default)**\r\n* ```forceSingleModeWidth``` - boolean - ignore element height when true and mode is single **(default = true)**\r\n* ```mix``` - number - min font size \r\n* ```max``` - number - max font size\r\n* ```throttle``` - number -  window resize throttle in milliseconds\r\n* ```onReady``` function - called when text is fitted.\r\n\r\n### Examples\r\n```javascript\r\n<Textfit mode=\"single\">\r\n     Hello World!\r\n</Textfit>\r\n```\r\n```javascript\r\n<Textfit mode=\"multi\" forceSingleModeWidth={true} min={24} max={64}>\r\n     Hello World!\r\n</Textfit>\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}