Rendering Guide
You can use the Sketch API to select Sketch containers such as documents, pages or groups, to pass through to the render
function.
Rendering to Multiple Pages or New Documents
src/my-command.js
(or whatever file your Sketch plugin entrypoint is).
import React from 'react';
import { render, Document, Page } from 'react-sketchapp';
// <Document> wrapper is required if you want to use multiple pages
const App = () => (
<Document>
<Page name="Page 1">
<Artboard>
<Text>Hello World!</Text>
</Artboard>
</Page>
<Page name="Page 2">
<Artboard>
<Text>Hello World, again!</Text>
</Artboard>
</Page>
</Document>
);
export default () => {
const documents = sketch.getDocuments();
const document =
sketch.getSelectedDocument() || new sketch.Document(); // get the current document // or create a new document
};
Rendering to Selected Document
This will render to the last active document. If there is no document open, document will be undefined and you will get an error, so you can add || new sketch.Document()
as a fallback to handle this.
import sketch from 'sketch';
import { render } from 'react-sketchapp';
// const App = () => ... or import App from './App';
export default () => {
const document = sketch.getSelectedDocument();
render(<App />, document);
};
Rendering to Document by Name
We can select a document by name, by looping through sketch.getDocuments()
and checking doc.path
inside the loop.
import path from 'path';
import sketch from 'sketch';
import { render } from 'react-sketchapp';
// const App = () => ... or import App from './App';
const getDocumentByName = name => {
return (sketch.getDocuments() || []).find(doc => {
return doc.path && path.basename(doc.path, '.sketch') === name;
});
};
export default () => {
const document = getDocumentByName('My App Design') || new sketch.Document(); // Fallback to new document if document not found
render(<App />, document);
};