Interacting with non-Pagedraw Code

Think of your React app as a tree of components. Pagedraw generates React components, which can be inserted anywhere in that hierarchy.

Pagedraw can make top level pages, assembling components you write in code or import from 3rd party libraries. Pagedraw can make low level widgets, which are used elsewhere in code written by hand.

Even if you think your React data flow is too convoluted to introduce Pagedraw, we promise we can save you from CSS if you “sandwich” your existing data handling code between Pagedraw components.

Using Pagedraw-generated components

Just import the component from the file it’s synced to. Pass in any dynamic data via props, like any other React component. For example, if you’re trying to import “Component 1” which has been synced to src/pagedraw/component_1.jsx and expects an Object Input named label of type string, you might want to do

import React, {Component} from 'react';
import Component1 from './pagedraw/component_1';

class MyHandwrittenComponent extends Component {
    render() {
        return (<div>
          <h1>Here is some non-Pagedraw code</h1>
          <span>I have plenty of other stuff going on in my life</span>
          <Component1 label={this.state.my_text} />
        </div>);
    }

    constructor(props) {
      super(props);
      this.state = {
        label: "this will get passed down to the Pagedrawn component"
      };
    }
}

This is the main way to interface Pagedraw with outside code. The component can be anything from something as small as a single button to something as complex as a whole Page.

Importing a non-Pagedraw widget with Override Code

  1. Take a screenshot of the widget you’d like to use
  2. Paste the screenshot into Pagedraw as an Image
  3. In the draw sidebar for the image, scroll down to the bottom and check the “Override Code” checkbox. A custom code area will appear below, saying <custom JSX tags here />
  4. In the custom code area, write the JSX you need to call the external widget. For example, to use a date picker, you might write <input type="date" />

This will insert your custom code, untouched and exactly as is, into the generated code. It will be where image block would have gone.

You can “override code” on any block. The overridden code will replace the block and its children.

If you ever felt an urge to edit bits of the generated code, it's most likely that you can achieve whatever you want by using override code instead.

Inserting logic from code outside Pagedraw in between Pagedraw components (useful for Redux)

A neat trick is to override an instance of MyComponent by something like MyComponentWrapper, which contains some code you write. MyComponentWrapper is then responsible for keeping track of some internal state and for fetching some data from a database for example, but its render function should simply require MyComponent, which is Pagedraw generated code.

External Components

External components are very similar to override code except that

A common great use case for external components is react-router’s Link component.