Expandable-textarea NPM

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

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