From 4b13ceb65727671a69f7306fa4e16a8d2a060a98 Mon Sep 17 00:00:00 2001 From: Francesco Orsi Date: Fri, 3 Sep 2021 10:48:44 +0100 Subject: [PATCH 1/3] added Function Component Example in README.md --- README.md | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 61 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0f9d385..a8d4067 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,66 @@ This package requires React 16.4.1 and higher. `npm i react-forge-viewer --save` -## Example +## Function Component Example +```jsx +import React, { useState } from 'react'; +import ForgeViewer from 'react-forge-viewer'; +import './App.css'; + +function App() { + + const [view, setView] = useState(false); + + function handleDocumentLoaded(doc, viewables) { + if (viewables.length === 0) { console.error('Document contains no viewables.'); } + else { setView(viewables[0]); } + } + + async function getForgeToken() { + return { + access_token:<>, + expires_in: <>, + token_type: "Bearer" + }; + } + + function handleViewerError(error) { console.log('Error loading viewer.'); } + function handleDocumentError(viewer, error) { console.log('Error loading a document'); } + function handleModelLoaded(viewer, model) { console.log('Loaded model:', model); } + function handleModelError(viewer, error) { console.log('Error loading the model.'); } + + async function handleTokenRequested(onAccessToken) { + if (onAccessToken) { + let token = await getForgeToken(); + if (token) onAccessToken(token.access_token, token.expires_in); + } + } + + return ( + + <> + > + view={view} + headless={false} + onViewerError={handleViewerError.bind(this)} + onTokenRequest={handleTokenRequested.bind(this)} + onDocumentLoad={handleDocumentLoaded.bind(this)} + onDocumentError={handleDocumentError.bind(this)} + onModelLoad={handleModelLoaded.bind(this)} + onModelError={handleModelError.bind(this)} + /> + + + ); + +} + +export default App +``` + +## Class Component Example ```jsx import React, { Component } from 'react'; import ForgeViewer from 'react-forge-viewer'; @@ -86,7 +145,7 @@ class App extends Component { return (
> view={this.state.view} headless={false} From 9f8863e00a83f99b4ddf3fc961adf6e2f3656759 Mon Sep 17 00:00:00 2001 From: Francesco Orsi Date: Fri, 3 Sep 2021 10:50:40 +0100 Subject: [PATCH 2/3] better indentation of Function Component Example in README.md --- README.md | 68 +++++++++++++++++++++++++++---------------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index a8d4067..f39fce1 100644 --- a/README.md +++ b/README.md @@ -22,51 +22,51 @@ import './App.css'; function App() { - const [view, setView] = useState(false); + const [view, setView] = useState(false); - function handleDocumentLoaded(doc, viewables) { - if (viewables.length === 0) { console.error('Document contains no viewables.'); } - else { setView(viewables[0]); } - } + function handleDocumentLoaded(doc, viewables) { + if (viewables.length === 0) { console.error('Document contains no viewables.'); } + else { setView(viewables[0]); } + } - async function getForgeToken() { + async function getForgeToken() { return { access_token:<>, expires_in: <>, token_type: "Bearer" }; - } + } - function handleViewerError(error) { console.log('Error loading viewer.'); } - function handleDocumentError(viewer, error) { console.log('Error loading a document'); } - function handleModelLoaded(viewer, model) { console.log('Loaded model:', model); } - function handleModelError(viewer, error) { console.log('Error loading the model.'); } + function handleViewerError(error) { console.log('Error loading viewer.'); } + function handleDocumentError(viewer, error) { console.log('Error loading a document'); } + function handleModelLoaded(viewer, model) { console.log('Loaded model:', model); } + function handleModelError(viewer, error) { console.log('Error loading the model.'); } - async function handleTokenRequested(onAccessToken) { - if (onAccessToken) { - let token = await getForgeToken(); - if (token) onAccessToken(token.access_token, token.expires_in); - } + async function handleTokenRequested(onAccessToken) { + if (onAccessToken) { + let token = await getForgeToken(); + if (token) onAccessToken(token.access_token, token.expires_in); } + } - return ( - - <> - > - view={view} - headless={false} - onViewerError={handleViewerError.bind(this)} - onTokenRequest={handleTokenRequested.bind(this)} - onDocumentLoad={handleDocumentLoaded.bind(this)} - onDocumentError={handleDocumentError.bind(this)} - onModelLoad={handleModelLoaded.bind(this)} - onModelError={handleModelError.bind(this)} - /> - - - ); + return ( + + <> + > + view={view} + headless={false} + onViewerError={handleViewerError.bind(this)} + onTokenRequest={handleTokenRequested.bind(this)} + onDocumentLoad={handleDocumentLoaded.bind(this)} + onDocumentError={handleDocumentError.bind(this)} + onModelLoad={handleModelLoaded.bind(this)} + onModelError={handleModelError.bind(this)} + /> + + + ); } From 3f1dcc8debf04cefcb65c6a1a30e18351e625641 Mon Sep 17 00:00:00 2001 From: Francesco Orsi Date: Fri, 3 Sep 2021 10:55:16 +0100 Subject: [PATCH 3/3] better indentation of Function Component Example in README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f39fce1..448aeab 100644 --- a/README.md +++ b/README.md @@ -30,11 +30,11 @@ function App() { } async function getForgeToken() { - return { - access_token:<>, - expires_in: <>, - token_type: "Bearer" - }; + return { + access_token:<>, + expires_in: <>, + token_type: "Bearer" + }; } function handleViewerError(error) { console.log('Error loading viewer.'); }