React Embedded Sample

📘

🔜 Preview Document

This is a preview. We expect to ship full React example soon.

Diffgram Embedded offers multiple wrappers for the most popular JS libraries and SDKs. Here is a sample on how to embed Diffgram on your react components:

TypeScript

import React, { useRef, useEffect } from 'react';
import DiffgramUI from '@diffgram/diffgramUI';
import './App.css';

const App = () => {
  const viewer = useRef(null);

  // if using a class, equivalent of componentDidMount 
  useEffect(() => {
    DiffgramUI(
      {
        projectStringID: 'my_project',
        mediaURL: 'your_file.png',
        schemaID: 1,
        apiKey: '123',
        apiSecret: '456'
        domID: '#diffgramUI'
      },
      viewer.current,
    ).then((diffgramUI) => {
        console.log('diffgramUI Instance List: ', diffgramUI.getInstanceList())
    });
  }, []);

  return (
    <div className="App">
      <div className="header">React sample: Diffgram Embedded</div>
      <div ID="diffgramUI" ref={viewer}></div>
    </div>
  );
};

export default App;