overlay-template.jsx

import React from "react";
import {
  render,
  Artboard,
  View,
} from "react-sketchapp";

const OverlayTemplate = ({ }) => {
  const artboardStyle = {
    width: 720,
    height: 1280,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  };
  return (
    <Artboard name="Overlay" style={artboardStyle}>
      <View
        name="cassette_outline"
        style={{
          height: 600,
          width: 200,
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <View
          name="barcode"
          style={{
            top: 100,
            position: "absolute",
            width: 50,
            height: 50,
            borderRadius: 10,
            borderWidth: 2,
            borderColor: "black"
          }}
        />
        <View
          name="viewport"
          style={{
            top: 250,
            position: "absolute",
            width: 40,
            height: 120,
            borderRadius: 10,
            borderWidth: 4,
            borderColor: "rgb(255, 0, 0)"
          }}
        />
        <View
          name="outline"
          style={{
            position: "absolute",
            top: 0,
            width: 200,
            height: 600,
            borderWidth: 2,
            borderColor: "black",
            margin: "0 auto",
            borderRadius: 20
          }}
        />
      </View>
    </Artboard>
  );
};

export default context => {
  const document = context.document;
  const pages = document.pages();
  var page = undefined;
  pages.forEach(p => {
    if (p.name() == "Sandbox") {
      page = p;
    }
  });
  if (page == undefined) {
    document.showMessage("Could not find Page named 'Sandbox'. Created it.");
    const page = context.document.documentData().addBlankPage();
    page.name = "Sandbox";
  }
  render(<OverlayTemplate />, page);
};