product-surface-presentation

Product Surface Presentation Component

Install

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

Usage

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 (
      <div>
      <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 
                        /> 
      </div>
    );
  }
}

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.

License

private ©