React Dynamic Input Width

Dynamically update the input width based on the input value length

   

Getting Started

``
npm install @jimsheen/react-dynamic-input-width
`

Examples

Basic example

`
import React from 'react';
import Input from '@jimsheen/react-dynamic-input-width';

export default function InputExample() {

const handleChange = (e: React.ChangeEvent) => {
console.log(e.target.value);
}

const handleKeyPress = (e: React.KeyboardEvent) => {
console.log(e.key);
}

return (
initialValue="Hello there"
padding={10}
initialWidth={100}
onChange={(e) => handleChange(e)}
onKeyPress={(e) => handleKeyPress(e)}
/>
)
}

`

Full example using refs:

`
import React, { useEffect } from "react";
import Input from "@jimsheen/react-dynamic-input-width";

export default function InputExample() {
const [isEdit, setIsEdit] = React.useState(false);
const [value, setValue] = React.useState("Hello there");

// create a ref for the value span
const valueRef = React.useRef(null);

// create a ref for the input
const inputRef = React.useRef(null);

// update value when input is changed
const handleChange = (e: React.ChangeEvent) => {
const { value } = e.target;
setValue(value);
};

// example of handling "Enter" key press
const handleKeyPress = (e: React.KeyboardEvent) => {
if ((e && e.key === "Enter") || !e) {
setIsEdit(!isEdit);
}
};

// toggle the input visibility
const handleClick = () => {
setIsEdit(!isEdit);
};

// focus the input when isEdit is true
useEffect(() => {
if (isEdit) inputRef.current?.focus();
}, [isEdit]);

return (
<>
Toggle Edit
{!isEdit && {value}}
{isEdit && (
initialValue={value}
padding={0}
// set initialWidth to the width of the value span element
initialWidth={valueRef.current?.offsetWidth}
onChange={(e) => handleChange(e)}
onKeyPress={(e) => handleKeyPress(e)}
ref={inputRef}
/>
)}

);
}
`

$3

Input accepts a ref by utilising the forwardRef HOC under the hood

`
const inputRef = React.useRef(null)

ref={inputRef}
/>
`

$3

It's also possible to pass additional props to the underlying input component such as "placeholder" for example

`
placeholder="Placeholder text"
/>
`

Props

| Prop | Type | Default | Required | Description |
|-------------- |-------- |--------------------- |---------- |----------------------------------------------------------------- |
| initialValue | string | undefined | false | The input's initial value |
| initialWidth | number | undefined | false | The input's initial width value in px |
| padding | number | 1 | false | Add's extra width to the input |
| fontSize | string | 16px | false | The font size of the input (used for measuring the offsetWidth) |
| className | string | input-dynamic-width | false | Default className |

Types

`
initialValue?: string
initialWidth?: number
padding?: number
fontSize?: string
onChange?: (event: React.ChangeEvent) => void
onKeyPress?: (event: React.KeyboardEvent) => void
className?: string
``

Demo

- Basic Example
- Toggle Input Visibility Example