TextArea

Thumbnail

import React, {useState} from 'react';
import {
  TextArea,
  Screen,
  ScrollView,
  Navigator,
  reactExtension,
  Text,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  const [text, setText] = useState('');

  return (
    <Navigator>
      <Screen
        name="TextArea"
        title="Comment Input Example"
      >
        <ScrollView>
          <TextArea
            label="Text"
            rows={4}
            placeholder="Input your text here"
            value={text}
            onChange={setText}
          />
          <Text>{text}</Text>
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

export default reactExtension(
  'pos.home.modal.render',
  () => <SmartGridModal />,
);

import {
  TextArea,
  Text,
  Screen,
  ScrollView,
  Navigator,
  extension,
} from '@shopify/ui-extensions-react/point-of-sale';

export default extension(
  'pos.home.modal.render',
  (root) => {
    const textArea = root.createComponent(
      TextArea,
      {
        label: 'Text',
        placeholder: 'Input your text here',
        required: true,
        value: '',
      },
    );

    const textBox = root.createComponent(Text);

    const onChangeHandler = (
      newValue: string,
    ) => {
      textArea.updateProps({value: newValue});
      textBox.replaceChildren(newValue);
    };

    textArea.updateProps({
      onChange: onChangeHandler,
    });

    const scrollView =
      root.createComponent(ScrollView);
    scrollView.append(textArea);
    scrollView.append(textBox);

    const screen = root.createComponent(Screen, {
      name: 'TextArea',
      title: 'Text Area Example',
    });
    screen.append(scrollView);

    const navigator =
      root.createComponent(Navigator);
    navigator.append(screen);

    root.append(navigator);
  },
);