Advanced Integrations

React

1. 1

   Install @spur.us/monocle-react

   Copy code

   npm install @spur.us/monocle-react

2. 2

   Add MoncleProvider to your app

   Wrap the section from which you wish to access Monocle with the MonocleProvider component.

   Copy code

   import React from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App.tsx";
   import { MonocleProvider } from "@spur.us/monocle-react";
   import MonocleLoader from "@spur.us/monocle-loader";
   
   const m = MonocleLoader({
     token:
       "CxTakHe1D3nTkVjfEMrfesNATGiNYHaOVIrFXxjRJtcdeAuRTVxGSObZ8b7ho7DjeqyZAS1FzFfAmzOkYQ153XP36GA8F8G92IVdLDndJpfEHk8ihlMQ2d32BR7c9Y0qhZMGqRQrlZIibu6byqGgregNESQUNFCLswmAG5LAuek02NwKx1Ly7IuOVhbePk2H3JxlQLkSAHJxEed3sZ2XeMuevap3hK1H1MuVXnaTfZwTCooUHVYlck2DdhReG20I7l6pckeYGp419hd5mmahibzNpRkPqGo0ShLGCId8lbngEFa9pdfu80wkw3VbYHn7UzWcbQq40eZDRbAgWCQyQlxuaxyvssqa105VGDnYpTcEPSqbONCX2n1LVmRYwpLSFgHaAHZibLg4b5Tc3Lau2xEWHNAKR0Hiyr9pjjsCPCEJVnX2bUKb1G2RV",
   });
   
   ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
       <MonocleProvider instance={m}>
         <App />
       </MonocleProvider>
     </React.StrictMode>,
   );

3. 3

   Use the useMonocle hook

   From a child component, use the useMonocle hook to retreive the monocle assessment.

   Copy code

   import useMonocle from "@spur.us/monocle-react";
   
   const MyFormPage = () => {
     const monocle = useMonocle();
     const onSubmit = (e) => {
       e.preventDefault();
       console.log(monocle.getBundle());
     };
   
     return (
       <div>
         <form onSubmit={onSubmit}>
           <button type="submit">Grab Assessment</button>
         </form>
       </div>
     );
   };

Mobile App Integrations

Monocle can also be integrated into a mobile app, utilizing device telemetry to make the most informed access decisions possible. We offer an SDK for both iOS and Android, along with an example application that demonstrates how to use the SDK.

iOS

Android

3rd Party Integrations

We offer a growing list of integrations and plugins with existing frameworks. Please see the integration matrix below for reference.