marker.js 2 Documentation: Using marker.js with React

Using marker.js with React

In this walkthrough we will create a simple React app (using Create React App), add an image to it, and then add marker.js 2 wired up to annotate that image.

Follow along or just lookup the sections you are interested in below.

Create React App

Let’s create a simple React app as the basis for our project. We will use Create React App for this.

npx create-react-app my-react-marker-app --template typescript
cd my-react-marker-app

NOTE:

We are using TypeScript in this walkthrough but feel free to remove the --template typescript part from the command above and just omit type declarations in the code examples below.

We will use class components in this walkthrough. So, we will start with this barebone App.tsx (App.js, if you aren’t using TypeScript).:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>marker.js 2 Demo.</h1>
      </div>
    );
  }
}

export default App;

Add an image

Now, let's add an image to our app. Grab some JPEG image and copy it to the public folder of the project. Let's call it sample.jpg.

Next we will add the image to our App component and create a ref for it, so that we can pass it to marker.js.

At this stage, our App file looks like this:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  imgRef = React.createRef<HTMLImageElement>();

  render() {
    return (
      <div className="App">
        <h1>marker.js 2 Demo.</h1>
        <img ref={this.imgRef} 
          src="sample.jpg" 
          alt="sample" 
          style={{ maxWidth: '50%' }} 
          />
      </div>
    );
  }
}

export default App;

Add marker.js 2

Now that we have our base project setup, it is time to add marker.js 2.

Run:

npm install markerjs2

yarn add markerjs2

After that we can import marker.js into our component and then wire it up.

import * as markerjs2 from 'markerjs2';

Let's create a showMarkerArea() method that we will then call to start annotating:

showMarkerArea() {
  if (this.imgRef.current !== null) {
    // create a marker.js MarkerArea
    const markerArea = new markerjs2.MarkerArea(this.imgRef.current);
    // attach an event handler to assign annotated image back to our image element
    markerArea.addEventListener('render', event => {
      if (this.imgRef.current) {
        this.imgRef.current.src = event.dataUrl;
      }
    });
    // launch marker.js
    markerArea.show();
  }
}

The only thing left now is to wire this method up so that when a user clicks on the image marker.js starts and they can start annotating.

<img ref={this.imgRef} 
  src="sample.jpg" 
  alt="sample" 
  style={{ maxWidth: '50%' }} 
  onClick={() => this.showMarkerArea()}
/>

And that's all it takes to integrate the basic marker.js functionality into a React app.

The complete code

Here's the complete final App.tsx for this walkthrough:

import React, { Component } from 'react';
import './App.css';
import * as markerjs2 from 'markerjs2';

class App extends Component {
  imgRef = React.createRef<HTMLImageElement>();

  showMarkerArea() {
    if (this.imgRef.current !== null) {
      // create a marker.js MarkerArea
      const markerArea = new markerjs2.MarkerArea(this.imgRef.current);
      // attach an event handler to assign annotated image back to our image element
      markerArea.addEventListener('render', event => {
        if (this.imgRef.current) {
          this.imgRef.current.src = event.dataUrl;
        }
      });
      // launch marker.js
      markerArea.show();
    }
  }

  render() {
    return (
      <div className="App">
        <h1>marker.js 2 Demo.</h1>
        <img ref={this.imgRef} 
          src="sample.jpg" 
          alt="sample" 
          style={{ maxWidth: '50%' }} 
          onClick={() => this.showMarkerArea()}
          />
      </div>
    );
  }
}

export default App;

JavaScript version of this demo in CodeSandbox

Check out the JavaScript version of this demo embeded below, or click here to open it in CodeSandbox.