https://github.com/wojtekmaj/update-input-width

A function that given input element, updates its width to fit its content.
https://github.com/wojtekmaj/update-input-width

Last synced: 7 months ago
JSON representation

A function that given input element, updates its width to fit its content.

• Host: GitHub
• URL: https://github.com/wojtekmaj/update-input-width
• Owner: wojtekmaj
• License: mit
• Created: 2019-05-03T12:42:17.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2025-03-06T21:22:29.000Z (8 months ago)
• Last Synced: 2025-03-18T07:51:46.322Z (7 months ago)
• Language: TypeScript
• Size: 3.55 MB
• Stars: 3
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

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)

# Update-Input-Width

A function that given an input element, updates its width to fit its content.

## tl;dr

- Install by executing `npm install update-input-width` or `yarn add update-input-width`.

- Import by adding `import updateInputWidth from 'update-input-width'`.

- Use it by calling it with input element as an argument.

## User guide

### `updateInputWidth(element: HTMLInputElement)`

A function that given an input element, updates its width to fit its content by setting inline `width` CSS property.

#### Sample usage

```ts

import updateInputWidth from 'update-input-width';

updateInputWidth(myInput); // 42

```

or

```ts

import { updateInputWidth } from 'update-input-width';

updateInputWidth(myInput); // 42

```

### `getFontShorthand(element: HTMLElement)`

A function that given HTML element returns font CSS shorthand property. Equal to Chrome-only code:

```ts

window.getComputedStyle(element).font;

```

#### Sample usage

```ts

import { getFontShorthand } from 'update-input-width';

getFontShorthand(myInput); // 'normal normal 600 normal 20px / 25px Arial, sans-serif'

```

### `measureText(text: string, font: string)`

A function that given text and font CSS shorthand property returns text width in pixels.

#### Sample usage

```ts

import { measureText } from 'update-input-width';

measureText('hello', 'normal normal 600 normal 20px / 25px Arial, sans-serif'); // 42

```

## License

The MIT License.

## Author

  

    

      

    

    

      Wojciech Maj