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 2 years ago