Choose a version:

useAttributeValues
hook

Returns the values for the specified attributes applied to the checkout.

Anchor to useAttributeValues
useAttributeValues(
keys
)

Anchor to useAttributeValues-parametersParameters

Anchor to keys keys string[] required: An array of attribute keys.

Anchor to useAttributeValues-returnsReturns

(string | undefined)[]

UseAttributeValuesGeneratedType

Returns the values for the specified `attributes` applied to the checkout.

keys
An array of attribute keys.
```
string[]
```

(string | undefined)[]

(string | undefined)[]

export function useAttributeValues<
  ID extends RenderExtensionPoint = RenderExtensionPoint,
>(keys: string[]): (string | undefined)[] {
  const attributes = useAttributes<ID>();

  if (!attributes?.length) {
    return [];
  }

  return keys.map((key) => {
    const attribute = attributes.find((attribute) => attribute.key === key);
    return attribute?.value;
  });
}

Was this section helpful?

Attribute values

React

import React from 'react';

import {

Text,

render,

useAttributeValues,

} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => (

));

function Extension() {

const [buyerSelectedFreeTShirt, tshirtSize] =

useAttributeValues([

'buyerSelectedFreeTShirt',

'tshirtSize',

]);

if (Boolean(buyerSelectedFreeTShirt) === true) {

return (

<Text>

You selected a free t-shirt, size:{' '}

{tshirtSize}

</Text>

);

}

return null;

}

examples

Attribute values

React

import React from 'react';
import {
  Text,
  render,
  useAttributeValues,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => (
  <Extension />
));

function Extension() {
  const [buyerSelectedFreeTShirt, tshirtSize] =
    useAttributeValues([
      'buyerSelectedFreeTShirt',
      'tshirtSize',
    ]);

  if (Boolean(buyerSelectedFreeTShirt) === true) {
    return (
      <Text>
        You selected a free t-shirt, size:{' '}
        {tshirtSize}
      </Text>
    );
  }

  return null;
}