TextArea

Renders a textarea element (W3schools Textarea) and accepts as props any html attribute listed at: Html Textarea Attributes.

Props

name: string

A field's name in Usetheform state.
If the TextArea is rendered within a <Collection array />, name is not allowed as a prop.

index: string

A field's index in array Collection.
index is only allowed if your TextArea is rendered within a <Collection array /> .

value: string

Specifies the initial value of an textarea element.

touched: boolean

A field that has been touched/visited. Default value of false.
If true, validation messages (sync and async) will be shown but only when the event onBlur of the field is triggered by a user action.

reducers: array | function

(nextValue, prevValue, formState) => nextValue

An array whose values correspond to different reducing functions.
Reducer functions specify how the TextArea's value change.

innerRef: object (a mutable ref object)

When you need to access the underlying DOM node created by TextArea (e.g. to call focus), you can use a ref to store a reference to the textarea dom node.

const ref = useRef(null)
<TextArea innerRef={ref} name="textarea" value="test" />

Basic usage

import { Form, TextArea } from 'usetheform'

root:{} 0 keys

<Form>
  <TextArea name="textarea" value="foo" />
</Form>

<Form>
  <TextArea name="textarea" value="foo" />
</Form>

Reducers

import { Form, TextArea } from 'usetheform'

root:{} 0 keys

() => {
  const noHtmlTags = (nextValue, prevValue) =>
    nextValue.replace(/(<([^>]+)>)/gi, '')
  const notNumber = (nextValue, prevValue) =>
    nextValue.replace(/[0-9]+/gi, '')
  return (
    <Form>
      <TextArea
        name="textareaReducer"
        reducers={[noHtmlTags, notNumber]}
        value="foo"
      />
    </Form>
  )
}

() => {
  const noHtmlTags = (nextValue, prevValue) =>
    nextValue.replace(/(<([^>]+)>)/gi, '')
  const notNumber = (nextValue, prevValue) =>
    nextValue.replace(/[0-9]+/gi, '')
  return (
    <Form>
      <TextArea
        name="textareaReducer"
        reducers={[noHtmlTags, notNumber]}
        value="foo"
      />
    </Form>
  )
}

Validation - Sync

import { useValidation } from 'usetheform'

root:{} 0 keys

() => {
  const notNumber = value =>
    !(value && !/^[A-Za-z ]+$/i.test(value))
      ? undefined
      : 'Numbers not allowed'
  const required = value =>
    value && value.trim() !== '' ? undefined : 'Required'
  const [status, validation] = useValidation([required, notNumber])
  return (
    <Form>
      <TextArea name="notEmpty" touched {...validation} />
      {status.error && <label>{status.error}</label>}
    </Form>
  )
}

() => {
  const notNumber = value =>
    !(value && !/^[A-Za-z ]+$/i.test(value))
      ? undefined
      : 'Numbers not allowed'
  const required = value =>
    value && value.trim() !== '' ? undefined : 'Required'
  const [status, validation] = useValidation([required, notNumber])
  return (
    <Form>
      <TextArea name="notEmpty" touched {...validation} />
      {status.error && <label>{status.error}</label>}
    </Form>
  )
}

Validation - Async

import { useAsyncValidation, useForm } from 'usetheform'
const Submit = () => {
  const { isValid } = useForm();
  return (
    <button disabled={!isValid} type="submit">
      Submit
    </button>
  );
};

root:{} 0 keys

() => {
  const asyncTest = value =>
    new Promise((resolve, reject) => {
      // it could be an API call or any async operation
      setTimeout(() => {
        if (value === 'foo') {
          reject('text not allowed')
        } else {
          resolve('Success')
        }
      }, 1000)
    })
  const [asyncStatus, asyncValidation] = useAsyncValidation(asyncTest)
  return (
    <Form>
      <TextArea name="text" touched {...asyncValidation} />
      {asyncStatus.status === undefined && (
        <label>Async Check Not Started Yet</label>
      )}
      {asyncStatus.status === 'asyncStart' && <label>Checking...</label>}
      {asyncStatus.status === 'asyncError' && (
        <label>{asyncStatus.value}</label>
      )}
      {asyncStatus.status === 'asyncSuccess' && (
        <label>{asyncStatus.value}</label>
      )}
      <br />
      <Submit />
    </Form>
  )
}