# salla-reward-card (https://docs.salla.dev/twilight/react/web-components/salla-reward-card)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

<Callout title="Used inside salla-loyalty">
  [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty) renders this component for you. You rarely use it directly.
</Callout>

A card for one loyalty prize with its image, points cost, group title and name.
Used inside salla-loyalty-program; a theme rarely places it directly.
The clickable area is marked with `role="button"`.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-reward-card>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaRewardCard } from '@salla.sa/twilight-components-react/reward-card';
```

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaRewardCard } from '@salla.sa/twilight-components-react/reward-card';

export function Example() {
  useEffect(() => {
    document.getElementById('reward').prize = { id: 1, name: 'Free coffee', cost_points: 500, image: '/coffee.jpg' };
  }, []);

  return (
    <SallaRewardCard id="reward" />
  );
}
```

```html
<salla-reward-card id="reward"></salla-reward-card>
<script>
  document.getElementById('reward').prize = { id: 1, name: 'Free coffee', cost_points: 500, image: '/coffee.jpg' };
</script>
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                                                                      | Type    | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
| `prize`  | `prize`   | The prize to show. An object with `id`, `name`, `description`, `image`, `cost_points` and `group_title`. It must be set as a property (JS), not as an attribute. | `Prize` |         |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event         | Description                                                                                               | Detail       |
| ------------- | --------------------------------------------------------------------------------------------------------- | ------------ |
| `actionClick` | Fires when the default action button is clicked. It is not fired for content placed in the `action` slot. | `MouseEvent` |
| `areaClick`   | Fires when the image and text area of the card is clicked. `event.detail` is the original MouseEvent.     | `MouseEvent` |

## Slots [#slots]

| Slot     | Description                                                          |
| -------- | -------------------------------------------------------------------- |
| `action` | Replaces the default "show reward" button at the bottom of the card. |

## Related [#related]

Renders: [`<salla-badge>`](https://docs.salla.dev/twilight/react/web-components/salla-badge).

Used inside: [`<salla-loyalty-panel>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-panel), [`<salla-loyalty-program>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-program).