Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
expandable-textarea
Advanced tools
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
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 contains replaceChar
and any other character excep validChar
.
(Default = '!!!!-!!!!-!!!!-!!!!'
)
replaceChar
is single character that means user can type here
(Default = '!'
)
validChar
is regEx means which character allowed, must not contain any character of maskString
or replaceChar
(Default = /\d/g
means 0 to 9)
preVisibleMask
means always show the format even it is empty.
(Default = true
)
rightToLeft
If true
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
means newValue
is a valid change from ExpandableTextarea
point of view.unformatedValue
must set to the unformated value after formating logic.newValue
must set to the formated value after formating logic
beforeElement
React element like an Icon or label. Click on them brings textarea to focus.
afterElement
className
To style wrapper div
around beforeElement
, original textarea
, afterElement
submitValue
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
name
Unique name will same key name in submitValue
Must be set for submiting new values.
initialValue = ''
totalLines
Unlimited lenght if not specified.
minRows
Sets minimum shrinking line count
maxRows
Sets maximum expanding line count
rows
Fixed line count if specified
formatFunction
Can be set to a built-in or custom formating function
resizeDebouncingDelay = 300
fitInField = false
Works with one line Like Input fields. It limits lenght to textarea view.
...rest
Additional standard textarea attributes like: disabled, wrap,...
MIT © makannew
FAQs
ReactJS component provides expandable textarea
The npm package expandable-textarea receives a total of 3 weekly downloads. As such, expandable-textarea popularity was classified as not popular.
We found that expandable-textarea demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.