@friction-dev/react
v0.1.1
Published
React component for the Friction widget — detects rage clicks, dead clicks, and form abandonment
Downloads
174
Maintainers
sammyfattahReadme
@friction-dev/react
React component for Friction — detects rage clicks, dead clicks, and form abandonment on your site.
This package is a thin wrapper that injects the hosted Friction widget script. It does not bundle the widget itself. All configuration (tracking toggles, widget position, theme) is managed in your Friction dashboard.
Install
npm install @friction-dev/reactUsage
Next.js (App Router)
Add the component to your root layout:
// app/layout.tsx
import { Friction } from "@friction-dev/react";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Friction siteKey="your-site-key" />
</body>
</html>
);
}React (Vite, CRA, etc.)
Add it once at the top of your app:
// App.tsx
import { Friction } from "@friction-dev/react";
function App() {
return (
<>
<Friction siteKey="your-site-key" />
{/* your app */}
</>
);
}Imperative
For non-component contexts:
import { initFriction } from "@friction-dev/react";
initFriction({ siteKey: "your-site-key" });Self-hosted instances
By default the component loads the widget from https://cdn.friction-app.dev/w.js. If you self-host Friction, pass your instance URL:
<Friction siteKey="your-site-key" scriptUrl="https://your-instance.com/w.js" />API
<Friction />
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| siteKey | string | Yes | Your site key from the Friction dashboard |
| scriptUrl | string | No | Widget script URL (defaults to Friction CDN) |
Renders nothing. Safe to mount anywhere — duplicate injections are prevented automatically.
initFriction(options)
| Option | Type | Required | Description |
|--------|------|----------|-------------|
| siteKey | string | Yes | Your site key |
| scriptUrl | string | No | Widget script URL |
Imperative alternative. Call once — repeat calls with the same key are no-ops. SSR-safe.
What this package does
- Injects a
<script>tag for the hosted Friction widget - Prevents duplicate script injection (across re-renders and manual installs)
- Works with React 18+ and Next.js App Router
What this package does not do
- Bundle or re-implement the widget
- Expose configuration props (use the dashboard)
- Track anything on its own
License
MIT