Select Label Layout Element

The Select Label Layout Element allows users to easily change and update the format and layout of their purchased shipping labels. This Element gives users the flexibility to choose the format that best suits their needs and preferences.

Users can choose between letter (8.5 x 11 inches) or thermal (4 x 6 inches) formats.

This can be used as a stand-alone Element and/or utilized within the Account Settings Element via the Shipping Label Layout section.

Create a Select Label Layout Element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { SelectLabelLayout, ElementsProvider } from '@shipengine/elements';
import { themeConfig } from '../themeConfig';

const tokenPath = '/path/to/token/endpoint';

const Foo = () => {
  const getToken = useCallback(() => {
    return fetch(tokenPath).then((res) => res.text());
  }, []);

  return (
    <ElementsProvider
      getToken={getToken}
      themeConfig={themeConfig}
      onError={handleError}
    >
      <SelectLabelLayout.Element />
    </ElementsProvider>
  );
};

SDK

1
2
3
4
5
6
7
8
// Creates a new instance of the Elements SDK.
const elements = new ElementsSDK(getToken, {
  onError: (err: Error) => console.error(err),
  themeConfig: themeConfig,
  locale: 'en-US',
});

const selectLabelLayout = elements.create('selectLabelLayout');