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'

Preview

Live Editor

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

Reducers

  import { Form, TextArea } from 'usetheform'

Preview

Live Editor

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

Validation - Sync

  import { Form, TextArea, useValidation } from 'usetheform'

Preview

Live Editor

function TextAreaSyncValidation() {
  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 className="vl">{status.error}</label>}
    </Form>
  )
}

Validation - Async

import { Form, Select, useAsyncValidation } from 'usetheform'
import { Submit } from './Submit.ts'

Preview

Live Editor

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

Submit.ts

import { useAsyncValidation, useForm } from 'usetheform'

const Submit = () => {
  const { isValid } = useForm();
  return (
    <button disabled={!isValid} type="submit">
      Submit
    </button>
  );
};