ReactJS component provides expandable textarea
Textarea will expand or shrink against its content. Also configurable to work as an Input field, limiting its total line numbers, formating and more options.
npm install --save expandable-textarea
- Expand and shrink
- Like Input
- Bring to focus by clicking on icon
- Credit card number formating
- Password format
- Phone format
- Custom format
import ExpandableTextarea from 'expandable-textarea'
<ExpandableTextarea
initialValue={serverState}
submitValue={handleSubmit}
totalLines={5}
name='expandShrink'
minRows={1}
maxRows={5}
/>
<ExpandableTextarea
className={'fixed-height'}
rows={1}
totalLines={1}
/>
.fixed-height > textarea {
height: 2rem;
}
import AddressIcon from '../address-icon/address-icon'
<ExpandableTextarea
beforeElement={<AddressIcon />}
afterElement={<AddressIcon />}
/>
import { maskFormating } from 'expandable-textarea'
const creditCardFormat = maskFormating({
maskString: '!!!!-!!!!-!!!!-!!!!',
replaceChar: '!',
validChar: /d/g,
preVisibleMask: true,
rightToLeft: false
})
<ExpandableTextarea
formatFunction={creditCardFormat}
/>
-
maskString
is string containsreplaceChar
and any other character excepvalidChar
.
(Default ='!!!!-!!!!-!!!!-!!!!'
) -
replaceChar
is single character that means user can type here
(Default ='!'
) -
validChar
is regEx means which character allowed, must not contain any character ofmaskString
orreplaceChar
(Default =/\d/g
means 0 to 9) -
preVisibleMask
means always show the format even it is empty.
(Default =true
) -
rightToLeft
Iftrue
means masking starts from right.
(Default =false
)
import { passwordFormating } from 'expandable-textarea'
const passwordFormat = passwordFormating(/[^-]/, '-')
First argument is allowd characters which here /[^-]/
means everything except -
masking character.
Second argument is password masking character. (Default = '*'
)
<ExpandableTextarea
formatFunction={passwordFormat}
/>
import { maskFormating } from 'expandable-textarea'
const phoneFormat = maskFormating({
maskString: '(!!) !!!! !!!!',
replaceChar: '!',
validChar: /d/g,
preVisibleMask: false,
rightToLeft: false
})
<ExpandableTextarea
formatFunction={phoneFormat}
/>
Just to show how it works we will build a formating function for wraping typed numbers inside parentheses. Demo and Code
import { maskFormating } from 'expandable-textarea'
const customFormat = (changeData) => {
const { newValue, valid } = changeData
if (!valid) return { ...changeData }
const newUnformatedValue = (newValue.match(/d/g) || ['']).join('')
const maskString = '(' + ''.padEnd(newUnformatedValue.length, '!') + ')'
const newChangeData = maskFormating({
maskString,
validChar: /d/g
})(changeData)
return { ...newChangeData, unformatedValue: newUnformatedValue }
}
<ExpandableTextarea
formatFunction={customFormat}
/>
changeData
is an object prepared by ExpandableTextarea
contains usefull information for applying formating logic.
{
iniValue,
iniLineCount,
iniSelectionStart,
iniSelectionEnd,
iniScrollTop,
iniScrollLeft,
pressedKey,
newValue,
newLineCount,
excessIsShrinking,
increasing,
newSelectionStart,
newSelectionEnd,
newScrollTop,
newScrollLeft,
unformatedValue,
valid
}
valid===true
meansnewValue
is a valid change fromExpandableTextarea
point of view.unformatedValue
must set to the unformated value after formating logic.newValue
must set to the formated value after formating logic
React element like an Icon or label. Click on them brings textarea to focus.
To style wrapper div
around beforeElement
, original textarea
, afterElement
Is a function. Called when onBlure
happened and textarea value changed from initialValue
Passed parameter = {[name]: newValue, differFromInitial, name, unformatedValue, value}
newValue
will be either formated or unformated value depends on if formating applied
Unique name will same key name in submitValue
Must be set for submiting new values.
Unlimited lenght if not specified.
Sets minimum shrinking line count
Sets maximum expanding line count
Fixed line count if specified
Can be set to a built-in or custom formating function
Works with one line Like Input fields. It limits lenght to textarea view.
Additional standard textarea attributes like: disabled, wrap,...
MIT © makannew