ResourceItem

Examples

• ResourceItem

  React

  import {
    ResourceItem,
    Button,
    Text,
    View,
    reactExtension,
  } from '@shopify/ui-extensions-react/customer-account';
  import React from 'react';
  
  export default reactExtension(
    'customer-account.page.render',
    () => <App />,
  );
  
  function App() {
    return (
      <View maxInlineSize={300}>
        <ResourceItem
          accessibilityLabel="Resource Item"
          onPress={() => {}}
          actionLabel="Manage"
          action={
            <>
              <Button
                kind="primary"
                onPress={() => {}}
              >
                Pay now
              </Button>
              <Button onPress={() => {}}>
                Second action
              </Button>
              <Button onPress={() => {}}>
                Third action
              </Button>
            </>
          }
        >
          Resource item content
        </ResourceItem>
      </View>
    );
  }
  

  JS

  import {
    ResourceItem,
    Button,
    View,
    extension,
  } from '@shopify/ui-extensions/customer-account';
  
  export default extension(
    'customer-account.page.render',
    (root, api) => {
      renderApp(root, api);
    },
  )
  
  function renderApp(root, api) {
  
    const actionFragment = root.createFragment();
  
    const primaryButton = root.createComponent(Button, {
      kind: 'primary',
      onPress: () => {},
    });
  
    primaryButton.append(root.createText('Pay now'))
  
    const secondButton = root.createComponent(Button, {
      kind: 'secondary',
      onPress: () => {},
    });
  
    secondButton.append(root.createText('Second button'))
  
    const thirdButton = root.createComponent(Button, {
      kind: 'secondary',
      onPress: () => {},
    });
  
    thirdButton.append(root.createText('Third button'))
  
    actionFragment.append(primaryButton);
    actionFragment.append(secondButton);
    actionFragment.append(thirdButton);
  
    const resourceItem = root.createComponent(
      ResourceItem,
      {
        accessibilityLabel: 'Resource Item',
        onPress: () => {},
        actionLabel: 'Manage',
        action: actionFragment,
      },
      'Content',
    );
  
    const view = root.createComponent(View, {maxInlineSize: 300});
    view.append(resourceItem);
  
    root.append(view);
  }