# @shoprocket/react-embed

> ## Installation

Latest version **1.1.10** (published 2022-05-02) · 0 weekly downloads

## Install

```sh
npm install @shoprocket/react-embed
pnpm add @shoprocket/react-embed
yarn add @shoprocket/react-embed
bun add @shoprocket/react-embed
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.10 |
| Published | 2022-05-02 |
| First published | 2022-04-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 31 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tomphill, ryanbadger |

## Links

- npm: https://www.npmjs.com/package/@shoprocket/react-embed
- npm.io page: https://npm.io/package/@shoprocket/react-embed

## Recent versions

- 1.1.10 (latest) — 2022-05-02
- 1.1.9 — 2022-05-01
- 1.1.8 — 2022-05-01
- 1.1.7 — 2022-05-01
- 1.1.6 — 2022-05-01
- 1.1.5 — 2022-05-01
- 1.1.4 — 2022-05-01
- 1.1.3 — 2022-05-01
- 1.1.2 — 2022-05-01
- 1.1.1 — 2022-05-01
- 1.1.0 — 2022-05-01
- 1.0.0 — 2022-05-01
- 1.0.0-0 — 2022-05-01
- 0.1.0 — 2022-04-30

## README

# Shoprocket react embed

## Installation

`npm i @shoprocket/react-embed`

## Usage

### Initialization

You'll need to grab your store_id and publishable_key from Shoprocket dashboard > Sales channels > Existing website > Embed > Advanced / React JS > Initializing Shoprocket

https://shoprocket.io/dashboard/sales-channels/existing-website/embed?type=multiple_products

Then wrap your entire app in the `ShoprocketProvider` (note if you're using Gatsby, you'll need to render the `ShoprocketProvider` in wrapRootElement in both `gatsby-ssr` and `gatsby-browser`: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/)

```
import {ShoprocketProvider} from '@shoprocket/react-embed';
<ShoprocketProvider
    value={{
      store_id: 1,
      publishable_key: "1",
    }}
>
    {/* rest of your app here */}
</ShoprocketProvider>
```

### Embedding products

You'll need to grab your the embed config from Shoprocket dashboard > Sales channels > Existing website > Embed > Advanced / React JS > Embed product

https://shoprocket.io/dashboard/sales-channels/existing-website/embed?type=multiple_products

and paste it as the config prop to the `ShoprocketEmbed` component:

```
import {ShoprocketEmbed} from '@shoprocket/react-embed';
<ShoprocketEmbed
    config={{
        options: {
            product_to_display: "29390",
            image_dimension_value: "crop",
            image_width: "1126",
            image_height: "1400",
            button_style: "standard",
        },
        includes: {
            show_product_name: "1",
            show_product_price: "1",
            show_product_image: "1",
            show_product_summary: "1",
            open_modal_on_image_click: "1",
            show_view_product_button: "1",
            show_add_to_cart_button: "1",
            show_min_max_order_quantity: "1",
            show_sale: "1",
            show_free_shipping: "1",
            show_new_product: "1",
            show_digital_download: "1",
            image_swap: "1",
        },
        product_popup: {
            show_product_name: "1",
            show_product_price: "1",
            show_product_summary: "1",
            show_product_description: "1",
            show_product_image: "1",
            show_select_quantity: "1",
            show_image_thumbnails: "1",
            show_product_reviews: "1",
            show_product_sku: "1",
            show_product_categories: "1",
            show_social_sharing_icons: "1",
            show_related_products: "1",
            thumbnail_layout: "horizontal_below",
            image_dimension_value: "crop",
            image_width: "1126",
            image_height: "1400",
            variation_styling: "dropdown",
            show_min_max_order_quantity: "1",
            show_sale: "1",
            show_free_shipping: "1",
            show_new_product: "1",
            show_digital_download: "1",
            show_product_tabs: "1",
            image_zoom: "1",
        },
    }}
/>
```

---
_Source: https://npm.io/package/@shoprocket/react-embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._