{"id":26601215,"url":"https://github.com/hronro/react-dynamic-font","last_synced_at":"2025-06-26T11:33:15.405Z","repository":{"id":71820535,"uuid":"70996513","full_name":"hronro/react-dynamic-font","owner":"hronro","description":"This is a react component which made your text does not wrap and dynamically adjust the font size.","archived":false,"fork":false,"pushed_at":"2019-02-18T05:05:31.000Z","size":1103,"stargazers_count":37,"open_issues_count":1,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-19T22:51:26.362Z","etag":null,"topics":["dynamic","font","font-size","javascript","react","wrap"],"latest_commit_sha":null,"homepage":"","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/hronro.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-15T15:34:51.000Z","updated_at":"2025-01-20T23:47:27.000Z","dependencies_parsed_at":"2023-06-11T01:45:28.350Z","dependency_job_id":null,"html_url":"https://github.com/hronro/react-dynamic-font","commit_stats":{"total_commits":36,"total_committers":3,"mean_commits":12.0,"dds":"0.33333333333333337","last_synced_commit":"e8f68dcf0ef0c2efa65b5446d387aa9a7dcc71a1"},"previous_names":["foisonocean/react-dynamic-font"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/hronro/react-dynamic-font","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hronro%2Freact-dynamic-font","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hronro%2Freact-dynamic-font/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hronro%2Freact-dynamic-font/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hronro%2Freact-dynamic-font/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hronro","download_url":"https://codeload.github.com/hronro/react-dynamic-font/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hronro%2Freact-dynamic-font/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260890520,"owners_count":23077861,"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":["dynamic","font","font-size","javascript","react","wrap"],"created_at":"2025-03-23T18:37:59.988Z","updated_at":"2025-06-26T11:33:15.377Z","avatar_url":"https://github.com/hronro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-dynamic-font [![Build Status](https://travis-ci.org/foisonocean/react-dynamic-font.svg?branch=master)](https://travis-ci.org/foisonocean/react-dynamic-font)\n\n### This is a react component which made your text does not wrap and dynamically adjust the font size\n\nSometimes we want some text to have a fixed width, and it will automatically reducing the font size when the number of characters is too large, so that the text is always in one line without wrapping. This is why I created this component.\n\n![Demo](https://raw.githubusercontent.com/foisonocean/react-dynamic-font/media/media/001.gif)\n\n### [A simple live demo](https://codepen.io/hronro/full/wrVvKK/)\n### [Play and install with Bit](https://bitsrc.io/foisonocean/react-dynamic-font/dynamic-font)\n\n## Installation\n\n```\nnpm install react-dynamic-font --save\n```\n\nor\n\n```\nyarn add react-dynamic-font\n```\n\n_This package require react v16.3 or higher, if you want to use at lower react version(v15.x - v16.2.x), try `yarn add react-dynamic-font@^1.0.0`, for React v0.14 and below, try `yarn add react-dynamic-font@^0.0.6`_\n\n## Usage\n\n`ReactDynamicFont` use the width of its parent element as the fixed width, and remember to add the css style `overflow: hidden` to its parent element.\n\n```jsx\nimport React, { Component } from 'react';\nimport DynamicFont from 'react-dynamic-font';\n\nclass Demo extends Component {\n  render() {\n    const style = {\n      width: 400,\n      fontSize: 30,\n      lineHeight: 30,\n      overflow: 'hidden',\n    };\n    return (\n      \u003cdiv style={style}\u003e\n        \u003cDynamicFont content={/* Your text here */} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nIf you want to add smooth animation while font size changing, add the `smooth` props.\n\n```jsx\n\u003cDynamicFont smooth content={/* Your text here */} /\u003e\n```\n\n### Have fun!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhronro%2Freact-dynamic-font","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhronro%2Freact-dynamic-font","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhronro%2Freact-dynamic-font/lists"}