{"id":16826985,"url":"https://github.com/wojtekmaj/update-input-width","last_synced_at":"2025-03-22T04:30:23.565Z","repository":{"id":49471451,"uuid":"184753471","full_name":"wojtekmaj/update-input-width","owner":"wojtekmaj","description":"A function that given input element, updates its width to fit its content.","archived":false,"fork":false,"pushed_at":"2025-03-06T21:22:29.000Z","size":3721,"stargazers_count":3,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T07:51:46.322Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/wojtekmaj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"wojtekmaj"}},"created_at":"2019-05-03T12:42:17.000Z","updated_at":"2025-03-06T21:22:32.000Z","dependencies_parsed_at":"2023-10-24T21:32:15.926Z","dependency_job_id":"ca5b5179-beec-4d4b-bc7d-97d313d57762","html_url":"https://github.com/wojtekmaj/update-input-width","commit_stats":{"total_commits":215,"total_committers":2,"mean_commits":107.5,"dds":0.08372093023255811,"last_synced_commit":"8dbbde7cd196b1b7cb38870ae9a3419f0f945158"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wojtekmaj%2Fupdate-input-width","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wojtekmaj%2Fupdate-input-width/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wojtekmaj%2Fupdate-input-width/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wojtekmaj%2Fupdate-input-width/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wojtekmaj","download_url":"https://codeload.github.com/wojtekmaj/update-input-width/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244907420,"owners_count":20529850,"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":[],"created_at":"2024-10-13T11:19:19.367Z","updated_at":"2025-03-22T04:30:23.099Z","avatar_url":"https://github.com/wojtekmaj.png","language":"TypeScript","readme":"[![npm](https://img.shields.io/npm/v/update-input-width.svg)](https://www.npmjs.com/package/update-input-width) ![downloads](https://img.shields.io/npm/dt/update-input-width.svg) [![CI](https://github.com/wojtekmaj/update-input-width/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/update-input-width/actions)\n\n# Update-Input-Width\n\nA function that given an input element, updates its width to fit its content.\n\n## tl;dr\n\n- Install by executing `npm install update-input-width` or `yarn add update-input-width`.\n- Import by adding `import updateInputWidth from 'update-input-width'`.\n- Use it by calling it with input element as an argument.\n\n## User guide\n\n### `updateInputWidth(element: HTMLInputElement)`\n\nA function that given an input element, updates its width to fit its content by setting inline `width` CSS property.\n\n#### Sample usage\n\n```ts\nimport updateInputWidth from 'update-input-width';\n\nupdateInputWidth(myInput); // 42\n```\n\nor\n\n```ts\nimport { updateInputWidth } from 'update-input-width';\n\nupdateInputWidth(myInput); // 42\n```\n\n### `getFontShorthand(element: HTMLElement)`\n\nA function that given HTML element returns font CSS shorthand property. Equal to Chrome-only code:\n\n```ts\nwindow.getComputedStyle(element).font;\n```\n\n#### Sample usage\n\n```ts\nimport { getFontShorthand } from 'update-input-width';\n\ngetFontShorthand(myInput); // 'normal normal 600 normal 20px / 25px Arial, sans-serif'\n```\n\n### `measureText(text: string, font: string)`\n\nA function that given text and font CSS shorthand property returns text width in pixels.\n\n#### Sample usage\n\n```ts\nimport { measureText } from 'update-input-width';\n\nmeasureText('hello', 'normal normal 600 normal 20px / 25px Arial, sans-serif'); // 42\n```\n\n## License\n\nThe MIT License.\n\n## Author\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd \u003e\n      \u003cimg src=\"https://avatars.githubusercontent.com/u/5426427?v=4\u0026s=128\" width=\"64\" height=\"64\" alt=\"Wojciech Maj\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://github.com/wojtekmaj\"\u003eWojciech Maj\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n","funding_links":["https://github.com/sponsors/wojtekmaj"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwojtekmaj%2Fupdate-input-width","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwojtekmaj%2Fupdate-input-width","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwojtekmaj%2Fupdate-input-width/lists"}