Skip to content

Instantly share code, notes, and snippets.

@benjohnde

benjohnde/overlay-template.jsx

Created September 17, 2018 13:59
Show Gist options
  • Save benjohnde/5eeebabcb3173aeff14136f0313ece51 to your computer and use it in GitHub Desktop.
Save benjohnde/5eeebabcb3173aeff14136f0313ece51 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment