ReactJS / JavaScript Stencil

Introduction

Myinfomonitor Illustrator has a very powerful type of stencil, the ReactJS and JavaScript Stencil. The stencil is marked with the ReactJS logo

This page will show the basics on how to use the ReactJS stencil and provide code examples.

The basics

After adding a ReactJS stencil to your illustration, open the dialog and choose "Edit options...", then choose the React tab. You will see the following UI:

The configuration UI for the ReactJS stencil.

1. CSS will provide the place to define the styles for your output. Note that Illustrator stencil settings at the right side of your illustration will NOT have an effect on ReactJS stencils output.

2. JSX: Here you write the actual React or JavaScript code, and the HTML code.

3. Data viewer lets you see the structure and sample values of your local data, i.e. the data defined in the illustration's Edit -> Edit variables...

4. Third party libraries makes coding faster and more robust. Please see examples below

JSX:

The ReactJS or JavaScript code should reside inside the following structure:

<div>
  {function() { 
    // Your code goes in here
    // Example:
    output = "Hello world!";
    return output;
  }()}
</div>

Third party libraries

Using the helper libraries, just tick the checkbox and press "Apply".

Moment.js is a helper library for handling and formatting date formats https://momentjs.com/docs/

// This code will use moment to convert a timestamp 
// that is of type String to a moment object and 
// display it with the given formatting
var m = moment(ts, 'x');
var time_nice = m.format("dddd, MMMM D YYYY, h:mm:ss a");

LOdash provides safe functions to use your variables. It will prevent code crashing if a variable is empty etc. https://lodash.com

var myVar = _.get($dynamicData, 'my_variable');

JSPath is a domain-specific language (DSL) that enables you to navigate and find data within your JSON documents. Using JSPath, you can select items of JSON in order to retrieve the data they contain. https://github.com/dfilatov/jspath

D3.js is currently NOT available for use