@secured-ai/react

React bindings for @secured-ai/core. This package provides a provider and hooks for detecting sensitive data, obfuscating user input, restoring protected responses, reviewing detected text, and working with privacy sessions from React components.

Install

npm install @secured-ai/react @secured-ai/core

react is a peer dependency and should already be installed by your application.

What it provides

• SecuredProvider for sharing a configured PrivacyClient across a React app.
• Hooks including usePrivacyClient, useDetect, useScan, useObfuscate, useRestore, useSessions, useTextReview, useVault, useFileDetect, and useFileObfuscate.
• Re-exported core types and utilities so most React consumers can import from @secured-ai/react.

Basic usage

import { PrivacyClient } from "@secured-ai/core";
import { SecuredProvider, useObfuscate } from "@secured-ai/react";

const client = new PrivacyClient();

function Composer() {
  const { obfuscate, restore, lastResult, isPending } = useObfuscate();

  async function sendMessage(text: string) {
    const result = await obfuscate(text);
    // Send result.processed to your AI provider.
    // Use restore(aiResponse, result.sessionId) before displaying the response.
    return result;
  }

  return null;
}

export function App() {
  return (
    <SecuredProvider client={client}>
      <Composer />
    </SecuredProvider>
  );
}

Vite setup

If you use Vite, exclude the Secured packages from dependency optimization so the browser can load the core package worker file from the package dist directory during local development:

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    exclude: ["@secured-ai/core", "@secured-ai/react"],
  },
  build: {
    target: "es2020",
  },
});

Publishing contents

The npm package is built from dist only. Source files, tests, coverage output, and source maps are not included in the published package.

Docs

See the developer documentation at https://dev-docs.securedai.com/docs/react.