React Custom Tool

In this example, we will create a custom tool with React and a custom property editor with React.

Each custom tool is built in it's own custom.js file which is then passed to unlayer.init. In this case, we'll need our custom.js file to use React.

Importing React

The first step to create a custom tool using React is to make sure we can access React in our bundle.

We recommend reusing Unlayer's React for better performance and avoiding version conflicts. We have the following libraries available globally:

• unlayer.React
• unlayer.ReactDOM

If you still need a different version of React, you can bundle it with your custom.js code.

You can access Unlayer's React by calling window.unlayer.React.

const React = window.unlayer.React;

const Viewer = () => {
  return <div>I am a custom tool.</div>;
};

Webpack Configuration

If you are using a bundler like webpack to bundle your custom.js file, then you can add this to your webpack.config.js file:

externals: {
  'react': 'window.unlayer.React',
  'react-dom': 'window.unlayer.ReactDOM'
}

Once this is added, you can import React in your custom.js file just like you would do it normally.

import React, { Component } from 'react';

---

Register your Tool

We'll need to create a custom.js file that includes the JavaScript to create our custom tool.

custom.js

const React = window.unlayer.React;

const Viewer = () => {
  return <div>I am a custom tool.</div>;
};

unlayer.registerTool({
  name: 'my_tool',
  label: 'My Tool',
  icon: 'fa-smile',
  supportedDisplayModes: ['web', 'email'],
  options: {},
  values: {},
  renderer: {
    Viewer: Viewer, // our React Viewer
    exporters: {
      web: function (values) {
        return '<div>I am a custom tool.</div>';
      },
      email: function (values) {
        return '<div>I am a custom tool.</div>';
      },
    },
    head: {
      css: function (values) {},
      js: function (values) {},
    },
  },
});

Then, we'll pass the custom.js URL to the editor in init option customJS.

• The URL must be absolute
• You can load multiple URLs by passing more in the array
• If you don't have the option to pass a URL, you can directly pass your JavaScript code as a string

unlayer.init({
  id: 'editor-container',
  displayMode: 'email',
  customJS: [
    'https://examples.unlayer.com/examples/react-custom-tool/custom.js',
  ],
});

Preview

Here's a live running preview of our custom tool. Drag and drop the custom tool with a smiley face :)

---

React Tool with Custom Property Editor

Let's update our React custom tool to use a React custom property editor now. In this example, we will create a custom color picker.

You can also use our built-in property editors to save time, check out the full list of available built-in property editors.

const React = window.unlayer.React;

// Custom Property Editor

const MyColorPicker = (props) => {
  const { label, value, updateValue, data } = props;

  return (
    <div>
      <div>My React Color Picker</div>
      <input
        class="color-value"
        defaultValue={value}
        onChange={(e) => updateValue(e.target.value)}
      />
      <button class="red" onClick={() => updateValue('#f00')}>
        Red
      </button>
      <button class="green" onClick={() => updateValue('#0f0')}>
        Green
      </button>
      <button class="blue" onClick={() => updateValue('#00f')}>
        Blue
      </button>
    </div>
  );
};

unlayer.registerPropertyEditor({
  name: 'my_color_picker',
  Widget: MyColorPicker,
});

// Custom Tool

const Viewer = () => {
  return <div>I am a custom tool.</div>;
};

unlayer.registerTool({
  name: 'my_tool',
  label: 'My Tool',
  icon: 'fa-smile',
  supportedDisplayModes: ['web', 'email'],
  options: {
    default: {
      title: null,
    },
    text: {
      title: 'Text',
      position: 1,
      options: {
        textColor: {
          label: 'Color',
          defaultValue: '#ff0000',
          widget: 'my_color_picker', // React custom property editor
        },
      },
    },
  },
  values: {},
  renderer: {
    Viewer: Viewer, // React custom tool
    exporters: {
      web: function (values) {
        return `<div style="color: ${values.textColor};">I am a custom tool.</div>`;
      },
      email: function (values) {
        return `<div style="color: ${values.textColor};">I am a custom tool.</div>`;
      },
    },
    head: {
      css: function (values) {},
      js: function (values) {},
    },
  },
});

Then, we'll pass the updated custom.js URL to the editor in init option customJS.

unlayer.init({
  id: 'editor-container',
  displayMode: 'email',
  customJS: [
    'https://examples.unlayer.com/examples/react-custom-tool/custom.js',
  ],
});

Preview

Here's a live running preview of our custom tool with built-in editor. Drag and drop the custom tool with a smiley face, and then select it on the canvas to play with the color picker.