@shopify/ui-extensions

What is @shopify/ui-extensions?

@shopify/ui-extensions is a package that allows developers to create custom UI extensions for Shopify. These extensions can be used to enhance the functionality and appearance of Shopify stores by adding custom components and features.

What are @shopify/ui-extensions's main functionalities?

Custom UI Components

This feature allows developers to create custom UI components like buttons, forms, and more. The code sample demonstrates how to create a simple button that logs a message when pressed.

import { extend, Button } from '@shopify/ui-extensions';

extend('Playground', (root) => {
  const button = root.createComponent(Button, {
    onPress: () => console.log('Button pressed!')
  }, 'Click me');

  root.appendChild(button);
});

Event Handling

This feature allows developers to handle events such as user input. The code sample demonstrates how to create a text field that logs the entered text whenever it changes.

import { extend, TextField } from '@shopify/ui-extensions';

extend('Playground', (root) => {
  const textField = root.createComponent(TextField, {
    label: 'Enter text',
    onChange: (value) => console.log('Text changed:', value)
  });

  root.appendChild(textField);
});

Styling Components

This feature allows developers to style their custom components. The code sample demonstrates how to create a styled view with padding and background color.

import { extend, View, Text } from '@shopify/ui-extensions';

extend('Playground', (root) => {
  const view = root.createComponent(View, {
    style: {
      padding: '10px',
      backgroundColor: 'lightblue'
    }
  },
  root.createComponent(Text, {}, 'Styled View'));

  root.appendChild(view);
});

Other packages similar to @shopify/ui-extensions

react

React is a popular JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of their applications. Compared to @shopify/ui-extensions, React is more general-purpose and can be used for a wide range of web applications, not just Shopify stores.

vue

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable and can be used to create complex single-page applications. Like React, Vue.js is more general-purpose compared to @shopify/ui-extensions and can be used for various types of web applications.

angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It provides a comprehensive solution for building dynamic web applications. Compared to @shopify/ui-extensions, Angular is a full-fledged framework that offers more built-in features and is suitable for larger applications.

README

@shopify/ui-extensions

This package contains shared types and utilities for all of the other ui-extensions packages in this repo.