Getting Started
First steps with the Protect SDK for React
Getting Started with the React SDK
The @trustnxt/protect-react SDK provides React hooks for capturing trusted media, collecting device sensor data, and cryptographically sealing assets with a Trust Label.
The capture features of the React SDK are designed for use on mobile devices (smartphones and tablets). While some functionality may work on desktop browsers, this is not a supported use case and may result in limited or degraded behavior.
Installation
npm install @trustnxt/protect-reactQuick Start
The useCapture hook is the easiest way to get started. It handles camera initialization, preview, and automatic background protection.
import { useCapture } from "@trustnxt/protect-react";
function CameraView() {
const capture = useCapture({
mode: "image",
apiKey: "tnxt_live_...",
apiSecret: "tnxt_secret_...",
onCapture: (event) => {
// Fires immediately with the raw, unprotected image.
console.log("Captured:", event.captureId);
},
onProtected: (event) => {
// Fires once the Trust Label has been applied.
console.log("Protected:", event.protectedBlob);
},
});
return (
<div>
<video ref={capture.previewRef} autoPlay playsInline muted />
<button
onClick={capture.takePicture}
disabled={capture.isCapturing || capture.pendingProtections > 0}
>
{capture.isCapturing ? "Capturing..." : "Take photo"}
</button>
</div>
);
}Make sure to add the necessary security to your app to safeguard your API key and secret. They should not be stored in client-side code in production.
Next Steps
Explore the detailed guides for specific capture modes and advanced usage: