{"id":22685485,"url":"https://github.com/shwilliam/vue-responsive-text","last_synced_at":"2025-04-12T19:36:22.587Z","repository":{"id":34082456,"uuid":"152692837","full_name":"shwilliam/vue-responsive-text","owner":"shwilliam","description":"↔ Vue component that scales its child node in relation to its parent node's width","archived":false,"fork":false,"pushed_at":"2022-12-09T04:39:22.000Z","size":427,"stargazers_count":26,"open_issues_count":10,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T13:53:59.282Z","etag":null,"topics":["component","resize","responsive","scale","text","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-responsive-text","language":"JavaScript","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/shwilliam.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":"2018-10-12T04:10:18.000Z","updated_at":"2024-08-16T16:44:45.000Z","dependencies_parsed_at":"2023-01-15T04:45:21.889Z","dependency_job_id":null,"html_url":"https://github.com/shwilliam/vue-responsive-text","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shwilliam%2Fvue-responsive-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shwilliam%2Fvue-responsive-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shwilliam%2Fvue-responsive-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shwilliam%2Fvue-responsive-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shwilliam","download_url":"https://codeload.github.com/shwilliam/vue-responsive-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248623388,"owners_count":21135241,"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":["component","resize","responsive","scale","text","vue"],"created_at":"2024-12-09T22:15:12.974Z","updated_at":"2025-04-12T19:36:22.559Z","avatar_url":"https://github.com/shwilliam.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["UI Utilities","Resize"],"readme":"# vue-responsive-text\n\n![scaling text example](https://user-images.githubusercontent.com/38357771/52575730-b85ac900-2dec-11e9-9869-d70139f6fabb.gif)\n\n\u003e Vue component that scales its child node in relation to its parent node's width\n\n[![vue-responsive-text demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/zx70w1o8rp?module=%2Fsrc%2FApp.vue)\n\n## Installation\nInstall the package from npm by running\n\n```\n$ npm i --save vue-responsive-text\n```\n\nor\n\n```\n$ yarn add vue-responsive-text\n```\n\n## Usage\nImport the component as you would any other and place responsive text as the component's child.\n\n```html\n\u003ctemplate\u003e\n  \u003cVueResponsiveText\u003e\n    this text will scale\n  \u003c/VueResponsiveText\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueResponsiveText from 'vue-responsive-text'\n\nexport default {\n  ...\n  components: {\n    VueResponsiveText\n  }\n};\n\u003c/script\u003e\n```\n\n## Props\n\n|Prop      |Type   |Required|Default|Description              |\n|----------|-------|--------|-------|-------------------------|\n|transition|number |false   |0      |Transition duration in ms|\n\n## Inspiration\nThis component was inspired by @foisonocean's ['react-dynamic-font'](https://www.npmjs.com/package/react-dynamic-font).\n\n## Contributing\nThis project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/shwilliam/vue-responsive-text/issues). If you wish to work on this project:\n\n1.  [Fork the project](https://github.com/shwilliam/vue-responsive-text/archive/master.zip)\n2.  Create your feature branch (`git checkout -b new-feature-branch`)\n3.  Commit your changes (`git commit -am 'add new feature'`)\n4.  Push to the branch (`git push origin new-feature-branch`)\n5.  [Submit a pull request!](https://github.com/shwilliam/vue-responsive-text/pull/new/master)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshwilliam%2Fvue-responsive-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshwilliam%2Fvue-responsive-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshwilliam%2Fvue-responsive-text/lists"}