Framework Guides

Step-by-step integration guides for popular frameworks.

React

'use client';

import { useEffect, useRef } from 'react';
import Triagly from '@triagly/sdk';

export function TriaglyProvider() {
  const triaglyRef = useRef<Triagly | null>(null);

  useEffect(() => {
    triaglyRef.current = new Triagly({
      apiKey: process.env.REACT_APP_TRIAGLY_KEY!,
      onSuccess: (feedbackId) => console.log('Submitted:', feedbackId),
    });

    return () => triaglyRef.current?.destroy();
  }, []);

  return null;
}

// App.tsx
export default function App() {
  return (
    <>
      <TriaglyProvider />
      {/* your app */}
    </>
  );
}

Notes

Mount the provider once near the root of your React tree
Works with StrictMode
For React Native, use the SDK in a WebView or integrate via API

Vue & Vite

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import Triagly from '@triagly/sdk';

let triagly: Triagly | null = null;

onMounted(() => {
  triagly = new Triagly({
    apiKey: import.meta.env.VITE_TRIAGLY_KEY,
    position: 'bottom-left',
  });
});

onUnmounted(() => {
  triagly?.destroy();
});
</script>

<template>
  <RouterView />
</template>

Best Practices

Use onUnmounted to prevent duplicate listeners during HMR
Prefix environment variables with VITE_

Next.js App Router

'use client';

import { useEffect } from 'react';
import Triagly from '@triagly/sdk';

let triagly: Triagly | null = null;

export function useTriagly() {
  useEffect(() => {
    if (!triagly) {
      triagly = new Triagly({
        apiKey: process.env.NEXT_PUBLIC_TRIAGLY_KEY!,
        captureConsole: true,
      });
    }

    return () => {
      if (typeof window === 'undefined') return;
      triagly?.destroy();
      triagly = null;
    };
  }, []);

  return triagly;
}

// layout.tsx
export default function RootLayout({ children }) {
  useTriagly();
  return <>{children}</>;
}

Deployment Advice

Load the hook inside your RootLayout or a top-level client boundary
Check typeof window for edge rendering

Pre-launch Checklist

✓Store API key in environment variables
✓Add your domain to Settings > Security > Allowed Origins
✓Smoke test submissions in staging before go-live

Need Another Framework?

Triagly works anywhere JavaScript runs. Reach out to [email protected] and let us know which framework guide you would like to see next.