Product Surface Presentation Component

Usage no npm install needed!

<script type="module">
  import vistaprintProductSurfacePresentation from 'https://cdn.skypack.dev/@vistaprint/product-surface-presentation';



Product Surface Presentation Component


npm install --save @vistaprint/product-surface-presentation


Translations are passed into the component with the following keys:

  • TRIM: Trim
  • BLEED: Bleed - Bleed
  • SAFE: Safety - Safety outline
  • CUT: Cut - Rarely used
  • SAFEAREA: Safe Area - The text the center of the safe area, empty string is acceptable
import React, { Component } from 'react'

import ProductDimension from '@vistaprint/product-surface-presentation'

class Example extends Component {
  render () {
    let productOpts = {"Cut Shape Type": "Rectangle",
      "Product Orientation": "Horizontal",
      "Color Core Color": "None",
      "Backside": "Blank",
      "Size": "Standard (85 x 55 mm)",
      "Stock": "Matte",
      "Finish": "None",
      "Weight": "Premium"}
    return (
      <ProductDimension productKey={"PRD-CIBYIJWX"} productOptions={productOpts}
                        units={['in', 'mm', 'cm', 'ft', 'yd']}
                        translations={{"TRIM": "Trim", "BLEED": "Bleed", "SAFE": "Safety", "CUT": "Cut", "SAFEAREA": "Safe Area"}}
                        locale={"de-DE"} //Optional
                        imageWidth={1000} //Image width in pixels 

Local Development

Project structure

There are two parts to this project: the react component itself and the example project to aid component development.

src\index.js: the code for the component.

example\src\index.js: the example project that uses the component.

Running the project

Make sure to run npm install in both the root of the project and in the example directory

  1. run npm run build at the root of the project.
  2. cd into example
  • Run npm run start

Pushing to npm

  • npm version to get the version (the first line)
  • npm version [next version number] to bump the version and tag
  • This will automatically commit it, so you'll need to git push --follow-tags to push the commit and the tags
  • Gitlab CI will automatically push the tagged version to npm

After any changes to the component, you can leave the example project running. It will refresh itself but you will need to run npm run build at the root for the example project to pick up the changes.


private ©