diff --git a/packages/react-core/src/components/TextArea/examples/TextArea.md b/packages/react-core/src/components/TextArea/examples/TextArea.md
index 235dfc24d63..4f80fdb6e52 100644
--- a/packages/react-core/src/components/TextArea/examples/TextArea.md
+++ b/packages/react-core/src/components/TextArea/examples/TextArea.md
@@ -9,300 +9,52 @@ propComponents: ['TextArea']
 
 ### Basic
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class SimpleTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return <TextArea value={value} onChange={this.handleTextAreaChange} aria-label="text area example" />;
-  }
-}
+```ts file="./TextAreaBasic.tsx"
 ```
 
 ### Invalid
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class InvalidTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleInvalidTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleInvalidTextAreaChange}
-        isRequired
-        validated={'error'}
-        aria-label="invalid text area example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaInvalid.tsx"
 ```
 
 ### Validated
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextArea } from '@patternfly/react-core';
-
-class InvalidTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      invalidText: 'You must have something to say',
-      validated: 'default',
-      helperText: 'Share your thoughts.'
-    };
-
-    this.simulateNetworkCall = callback => {
-      setTimeout(callback, 2000);
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState(
-        {
-          value,
-          validated: 'default',
-          helperText: 'Validating...'
-        },
-        this.simulateNetworkCall(() => {
-          if (value && value.length > 0) {
-            if (value.length >= 10) {
-              this.setState({ validated: 'success', helperText: 'Thanks for your comments!' });
-            } else {
-              this.setState({
-                validated: 'error',
-                invalidText: 'Your being too brief, please enter at least 10 characters.'
-              });
-            }
-          } else {
-            this.setState({ validated: 'warning', helperText: 'You must have something to say' });
-          }
-        })
-      );
-    };
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-
-    return (
-      <Form>
-        <FormGroup
-          label="Comments:"
-          type="string"
-          helperText={helperText}
-          helperTextInvalid={invalidText}
-          fieldId="selection"
-          validated={validated}
-        >
-          <TextArea
-            value={value}
-            onChange={this.handleTextAreaChange}
-            isRequired
-            validated={validated}
-            aria-label="invalid text area example"
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./TextAreaValidated.tsx"
 ```
 
-### Vertically resizable text area
-
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
+### Vertically resizable
 
-class VerticalResizeTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleTextAreaChange}
-        resizeOrientation="vertical"
-        aria-label="text vertical resize example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaVerticallyResizable.tsx"
 ```
 
-### Horizontally resizable text area
-
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class HorizontalResizeTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
+### Horizontally resizable
 
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleTextAreaChange}
-        resizeOrientation="horizontal"
-        aria-label="text horizontal resize example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaHorizontallyResizable.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea defaultValue="default value" aria-label="uncontrolled text area example" />;
+```ts file="./TextAreaUncontrolled.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea aria-label="disabled text area example" isDisabled />;
+```ts file="./TextAreaDisabled.tsx"
 ```
 
 ### Read only
 
-```js
-import React from 'react';
-import { Checkbox, TextArea } from '@patternfly/react-core';
-
-const ReadOnlyTextArea = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
-
-  return (
-    <React.Fragment>
-      <div style={{ marginBottom: '12px' }}>
-        <Checkbox
-          id="isPlain"
-          key="isPlain"
-          label="Plain read only variant"
-          isChecked={isPlainChecked}
-          onChange={checked => setIsPlainChecked(checked)}
-        />
-      </div>
-      <TextArea
-        aria-label="read only text area example"
-        value="read only text area example"
-        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
-      />
-    </React.Fragment>
-  );
-};
+```ts file="./TextAreaReadOnly.tsx"
 ```
 
 ### Auto resizing
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea aria-label="auto resizing text area example" autoResize />;
+```ts file="./TextAreaAutoResizing.tsx"
 ```
 
 ### Icon sprite variants
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-IconSpriteTextArea = () => {
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextArea
-        validated={ValidatedOptions.success}
-        isIconSprite
-        type="text"
-        onChange={value => setSuccess(value)}
-        aria-label="success icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={ValidatedOptions.warning}
-        isIconSprite
-        type="text"
-        onChange={value => setWarning(value)}
-        aria-label="warning icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={ValidatedOptions.error}
-        isIconSprite
-        type="text"
-        onChange={value => setError(value)}
-        aria-label="error icon sprite text area example"
-      />
-    </>
-  );
-};
+```ts isBeta file="./TextAreaIconSprite.tsx"
 ```
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
new file mode 100644
index 00000000000..ff4f536b60b
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaAutoResizing: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      aria-label="auto resizing text area example"
+      autoResize
+    />
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx
new file mode 100644
index 00000000000..228602248df
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return <TextArea value={value} onChange={value => setValue(value)} aria-label="text area example" />;
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaDisabled.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaDisabled.tsx
new file mode 100644
index 00000000000..cb5b455a4b0
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaDisabled.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaDisabled: React.FunctionComponent = () => (
+  <TextArea aria-label="disabled text area example" isDisabled />
+);
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
new file mode 100644
index 00000000000..7aa543459b4
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaHorizontallyResizable: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      resizeOrientation="horizontal"
+      aria-label="text area horizontal resize example"
+    />
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx
new file mode 100644
index 00000000000..c63a9d8938c
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaIconSprite: React.FunctionComponent = () => {
+  const [success, setSuccess] = React.useState('');
+  const [warning, setWarning] = React.useState('');
+  const [error, setError] = React.useState('');
+
+  return (
+    <>
+      <TextArea
+        validated={'success'}
+        isIconSprite
+        type="text"
+        onChange={value => setSuccess(value)}
+        value={success}
+        aria-label="success icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={'warning'}
+        isIconSprite
+        type="text"
+        onChange={value => setWarning(value)}
+        value={warning}
+        aria-label="warning icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={'error'}
+        isIconSprite
+        type="text"
+        onChange={value => setError(value)}
+        value={error}
+        aria-label="error icon sprite text area example"
+      />
+    </>
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx
new file mode 100644
index 00000000000..765f29b9569
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaInvalid: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      isRequired
+      validated={'error'}
+      aria-label="invalid text area example"
+    />
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx
new file mode 100644
index 00000000000..bf9da8f74a9
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Checkbox, TextArea } from '@patternfly/react-core';
+
+export const TextAreaReadOnly: React.FunctionComponent = () => {
+  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          id="isPlain"
+          key="isPlain"
+          label="Plain read only variant"
+          isChecked={isPlainChecked}
+          onChange={checked => setIsPlainChecked(checked)}
+        />
+      </div>
+      <TextArea
+        aria-label="read only text area example"
+        value="read only text area example"
+        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaUncontrolled.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaUncontrolled.tsx
new file mode 100644
index 00000000000..f2a75725e2f
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaUncontrolled.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaUncontrolled: React.FunctionComponent = () => (
+  <TextArea defaultValue="default value" aria-label="uncontrolled text area example" />
+);
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
new file mode 100644
index 00000000000..58aa1c2ee46
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Form, FormGroup, TextArea } from '@patternfly/react-core';
+
+export const TextAreaValidated: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [invalidText, setInvalidText] = React.useState('You must have something to say');
+  const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
+  const [helperText, setHelperText] = React.useState('Share your thoughts.');
+  const simulateNetworkCall = (callback: Function) => {
+    setTimeout(callback, 2000);
+  };
+
+  const handleTextAreaChange = (value: string) => {
+    setValue(value);
+    setValidated('default');
+    setHelperText('Validating...');
+    simulateNetworkCall(() => {
+      if (value.length > 0) {
+        if (value.length >= 10) {
+          setValidated('success');
+          setHelperText('Thanks for your comments!');
+        } else {
+          setValidated('error');
+          setInvalidText("You're being too brief, please enter at least 10 characters.");
+        }
+      } else {
+        setValidated('warning');
+        setHelperText('You must have something to say');
+      }
+    });
+  };
+  return (
+    <Form>
+      <FormGroup
+        label="Comments:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <TextArea
+          value={value}
+          onChange={value => handleTextAreaChange(value)}
+          isRequired
+          validated={validated}
+          aria-label="invalid text area example"
+        />
+      </FormGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx
new file mode 100644
index 00000000000..769dcd83573
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const VerticalResizeTextArea: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      resizeOrientation="vertical"
+      aria-label="text area vertical resize example"
+    />
+  );
+};