@acusti/input-text
Advanced tools
Comparing version
import * as React from 'react'; | ||
export declare type Props = { | ||
export type Props = { | ||
autoComplete?: string; | ||
className?: string; | ||
disabled?: boolean; | ||
form?: string; | ||
initialValue?: string; | ||
list?: string; | ||
max?: number; | ||
@@ -13,2 +15,3 @@ maxHeight?: number | string; | ||
multiLine?: boolean; | ||
multiple?: boolean; | ||
name?: string; | ||
@@ -25,2 +28,3 @@ onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown; | ||
selectTextOnFocus?: boolean; | ||
size?: number; | ||
step?: number; | ||
@@ -27,0 +31,0 @@ tabIndex?: number; |
import * as React from 'react'; | ||
const { useCallback, useEffect, useImperativeHandle, useRef } = React; | ||
const InputText = React.forwardRef(({ autoComplete, className, disabled, initialValue, max, maxHeight = Infinity, maxLength, min, minLength, multiLine, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, pattern, placeholder, readOnly, required, selectTextOnFocus, step, tabIndex, title, type = 'text', }, ref) => { | ||
const InputText = React.forwardRef(({ autoComplete, className, disabled, form, initialValue, list, max, maxHeight = Infinity, maxLength, min, minLength, multiLine, multiple, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, pattern, placeholder, readOnly, required, selectTextOnFocus, size, step, tabIndex, title, type = 'text', }, ref) => { | ||
const inputRef = useRef(null); | ||
@@ -52,3 +52,3 @@ useImperativeHandle(ref, () => inputRef.current); | ||
const Element = (multiLine ? 'textarea' : 'input'); | ||
return (React.createElement(Element, Object.assign({ autoComplete: autoComplete, className: className, defaultValue: initialValue || '', disabled: disabled, maxLength: maxLength, minLength: minLength, name: name, onBlur: selectTextOnFocus ? handleBlur : onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onSelect: selectTextOnFocus ? handleSelect : undefined, pattern: pattern, placeholder: placeholder, readOnly: readOnly, required: required, ref: inputRef, tabIndex: tabIndex, title: title, type: type }, (multiLine | ||
return (React.createElement(Element, Object.assign({ autoComplete: autoComplete, className: className, defaultValue: initialValue || '', disabled: disabled, form: form, list: list, maxLength: maxLength, minLength: minLength, multiple: multiple, name: name, onBlur: selectTextOnFocus ? handleBlur : onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onSelect: selectTextOnFocus ? handleSelect : undefined, pattern: pattern, placeholder: placeholder, readOnly: readOnly, required: required, ref: inputRef, size: size, tabIndex: tabIndex, title: title, type: type }, (multiLine | ||
? { onInput: setInputHeight, rows: 1 } | ||
@@ -55,0 +55,0 @@ : { max, min, step })))); |
{ | ||
"name": "@acusti/input-text", | ||
"version": "0.12.0", | ||
"version": "1.0.0", | ||
"description": "React component that renders a semi-controlled input with multiLine and selectTextOnFocus support", | ||
"keywords": [ | ||
"react", | ||
"react-component", | ||
"form", | ||
"input", | ||
"input-text", | ||
"textarea", | ||
"ssr", | ||
"typescript", | ||
"ts", | ||
"flow" | ||
], | ||
"type": "module", | ||
@@ -15,3 +28,4 @@ "sideEffects": false, | ||
"type": "git", | ||
"url": "git+https://github.com/acusti/uikit.git" | ||
"url": "https://github.com/acusti/uikit.git", | ||
"directory": "packages/input-text" | ||
}, | ||
@@ -25,4 +39,4 @@ "author": "andrew patton <andrew@acusti.ca> (https://www.acusti.ca)", | ||
"devDependencies": { | ||
"@types/react": "^18.0.15", | ||
"typescript": "^4.8.4" | ||
"@types/react": "^18.0.25", | ||
"typescript": "^4.9.3" | ||
}, | ||
@@ -29,0 +43,0 @@ "peerDependencies": { |
# @acusti/input-text | ||
[](https://www.npmjs.com/package/@acusti/input-text) | ||
[](https://libraries.io/npm/@acusti%2Finput-text/sourcerank) | ||
[](https://npms.io/search?q=%40acusti%2Finput-text) | ||
[](https://bundlephobia.com/package/@acusti/input-text) | ||
[](https://www.npmjs.com/package/@acusti/input-text) | ||
`InputText` is a React component that renders an uncontrolled input whose | ||
value is overwritten whenever `props.initialValue` changes. Also, if | ||
`InputText` is a React component that renders a semi-controlled input, | ||
meaning that while it is [uncontrolled][] in the React sense, it’s value is | ||
overwritten whenever `props.initialValue` changes. Also, if | ||
`props.selectTextOnFocus` is true, it selects the entire contents of the | ||
input whenever the input is focused. Lastly, if `props.mutliLine` is true, it renders a textarea element that autogrows and shrinks to adjust to the length of its contents. | ||
input whenever the input is focused. Lastly, if `props.multiLine` is true, | ||
it renders a textarea element that autogrows and shrinks to adjust to the | ||
length of its contents. | ||
[uncontrolled]: https://reactjs.org/docs/uncontrolled-components.html |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
16869
7.15%244
7.49%0
-100%17
41.67%