expandable-textarea

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.

Install

npm install --save expandable-textarea

How to use

• Expand and shrink
• Like Input
• Bring to focus by clicking on icon
• Credit card number formating
• Password format
• Phone format
• Custom format

Expand and shrink

Demo and Code

import ExpandableTextarea from 'expandable-textarea'

  <ExpandableTextarea
    initialValue={serverState}
    submitValue={handleSubmit}
    totalLines={5}
    name='expandShrink'
    minRows={1}
    maxRows={5}
  />

Fixed size like input field

Demo and Code

  <ExpandableTextarea
    className={'fixed-height'}
    rows={1}
    totalLines={1}
  />

.fixed-height > textarea {
  height: 2rem;
}

Bring to focus by clicking on icon

Demo and Code

import AddressIcon from '../address-icon/address-icon'

  <ExpandableTextarea
    beforeElement={<AddressIcon />}
    afterElement={<AddressIcon />}
  />

Credit card number formating

Demo and Code

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)

Password format

Demo and Code

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}
  />

Phone format

Demo and Code

import { maskFormating } from 'expandable-textarea'

  const phoneFormat = maskFormating({
    maskString: '(!!) !!!! !!!!',
    replaceChar: '!',
    validChar: /d/g,
    preVisibleMask: false,
    rightToLeft: false
  })

  <ExpandableTextarea
    formatFunction={phoneFormat}
  />

Custom format

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

Props

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,...

License

MIT © makannew