Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kierianlee/react-autowidth-input
Highly configurable & extensible automatically sized input field built with hooks.
https://github.com/kierianlee/react-autowidth-input
Last synced: 3 months ago
JSON representation
Highly configurable & extensible automatically sized input field built with hooks.
- Host: GitHub
- URL: https://github.com/kierianlee/react-autowidth-input
- Owner: kierianlee
- Created: 2020-10-12T07:57:33.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-28T16:57:27.000Z (about 1 year ago)
- Last Synced: 2024-07-18T21:42:50.717Z (7 months ago)
- Language: TypeScript
- Size: 1.75 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-components - react-autowidth-input - Highly configurable & extensible automatically sized input field built with hooks. (UI Components / Form Components)
README
# React Autowidth Input
Highly configurable & extensible automatically sized input field.
[](https://www.npmjs.com/package/react-autowidth-input)
## Features
- Works out of the box with zero config
- Supports usage as a controlled or uncontrolled input
- Supports custom refs
- Miniscule bundle size
## Install
npm i react-autowidth-input
## Quick Start
```jsx
import AutowidthInput from "react-autowidth-input";
{
// event.target.value contains the new value
}}
/>;
```
## Additional Props
The component supports the following props in extension to the regular html input props.
### extraWidth
_extraWidth={number}_
Default: 16
The amount of additional space rendered after the input.
```jsx
import React from "react";
import AutowidthInput from "react-autowidth-input";
const MyComponent = () => {
return ;
};
...
```
### wrapperClassName
_wrapperClassName={string}_
Class provided to the wrapper element encapsulating the input.
```jsx
import React from "react";
import AutowidthInput from "react-autowidth-input";
const MyComponent = () => {
return ;
};
...
```
### wrapperStyle
_wrapperStyle={{}}_
Inline styles provided to the wrapper element encapsulating the input.
```jsx
import React from "react";
import AutowidthInput from "react-autowidth-input";
const myStyles = {
padding: "1rem"
}
const MyComponent = () => {
return
};
...
```
### onAutoSize
_onAutoSize={(newWidth) => {}}_
Callback function to be fired on input resize. `newWidth` does not include width specified by `extraWidth` (see [above for `extraWidth` prop](#extrawidth))
```jsx
import React, {useState} from "react";
import AutowidthInput from "react-autowidth-input";
const MyComponent = () => {
const [width, setWidth] = useState(0);
const myFunction = (newWidth) => {
setWidth(newWidth);
}
return
};
...
```
### placeholderIsMinWidth
_placeholderIsMinWidth={boolean}_
If set to true, the input will never resize to be smaller than the width of the placeholder.
```jsx
import React from "react";
import AutowidthInput from "react-autowidth-input";
const MyComponent = () => {
return
};
...
```
### minWidth
_minWidth={number}_
If set, specifies the minimum width of input element. Width specified by `extraWidth` is applied anyway, so actual minimum width is actually `extraWidth + minWidth` (see [above for `extraWidth` prop](#extrawidth))
```jsx
import React from "react";
import AutowidthInput from "react-autowidth-input";
const MyComponent = () => {
return
};
...
```
## Notes
This component was inspired by Jed Watson's react-input-autosize, but rebuilt with modern react APIs.
## Contributors
- [kierien](https://github.com/kierien)
- [burtek](https://github.com/burtek)