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(() => {
        projectStringID: 'my_project',
        mediaURL: 'your_file.png',
        schemaID: 1,
        apiKey: '123',
        apiSecret: '456'
        domID: '#diffgramUI'
    ).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>

export default App;