Canonical Example: Vite + React

Step-by-step guide to integrate @p47h/vault-react in a Vite + React project.

---

1. Create project

npm create vite@latest my-vault-app --template react-ts
cd my-vault-app
npm install

---

2. Install vault-react

npm install @p47h/vault-react

---

3. Set up the Provider

Update src/App.tsx:

import { P47hProvider } from "@p47h/vault-react";
import SecretNotes from "./SecretNotes";

function App() {
  return (
    <P47hProvider>
      <SecretNotes />
    </P47hProvider>
  );
}

export default App;

---

4. Create component with secrets

Create src/SecretNotes.tsx:

import { useSecret } from "@p47h/vault-react";

function SecretNotes() {
  const [note, setNote, status] = useSecret("my_diary");

  if (status === "loading") return <div>Loading...</div>;

  return (
    <textarea
      value={note || ""}
      onChange={(e) => setNote(e.target.value)}
      placeholder="Write your secret note..."
    />
  );
}

export default SecretNotes;

---

5. Configure Vite for WASM

Update vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ["@p47h/vault-react"],
  },
  build: {
    target: "esnext",
  },
});

---

6. Run

npm run dev

---

Project structure

my-vault-app/
├── src/
│   ├── App.tsx          # Provider
│   ├── SecretNotes.tsx  # Component with useSecret
│   └── main.tsx
├── vite.config.ts
└── package.json

---