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:
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;
Updated almost 3 years ago
