{"id":14870,"library":"react-facebook-pixel","title":"React Facebook Pixel","description":"React Facebook Pixel is a wrapper library for integrating Facebook's Pixel (now Meta Pixel) into React applications. It provides a straightforward API for initializing the pixel, tracking page views, and logging standard or custom events. The current stable version is 1.0.4, but the package has not seen any new releases to npm in over five years, with its last publication in December 2020. This indicates an abandoned maintenance cadence, suggesting potential compatibility issues with newer React versions, updated Facebook Pixel APIs, or modern web development practices like server-side rendering (SSR). Differentiators from actively maintained alternatives (like `react-facebook` or `react-use-facebook-pixel`) include its simplified, direct API for basic pixel functionalities, though it lacks modern React features such as hooks or built-in SSR safety measures.","status":"abandoned","version":"1.0.4","language":"javascript","source_language":"en","source_url":"git://github.com/zsajjad/react-facebook-pixel","tags":["javascript","react","reactjs","react-component","angular","vue","pixel","facebook-pixel","typescript"],"install":[{"cmd":"npm install react-facebook-pixel","lang":"bash","label":"npm"},{"cmd":"yarn add react-facebook-pixel","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-facebook-pixel","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is the primary way to import the library using ES Modules for browser-side React applications.","symbol":"ReactPixel","correct":"import ReactPixel from 'react-facebook-pixel';"},{"note":"When using CommonJS `require()` in environments like Node.js or during server-side rendering (SSR), accessing the `.default` property is necessary to retrieve the module's main export. Omitting `.default` is a common mistake that leads to errors, especially in CI/bundling environments.","wrong":"const ReactPixel = require('react-facebook-pixel');","symbol":"ReactPixel","correct":"const ReactPixel = require('react-facebook-pixel').default;"},{"note":"While the library ships with TypeScript types, direct type imports are typically used for the default export. However, due to its abandonment, type definitions might not be up-to-date with current TypeScript standards or Meta Pixel API changes.","symbol":"typeof ReactPixel","correct":"import type ReactPixelType from 'react-facebook-pixel';"}],"quickstart":{"code":"import ReactPixel from 'react-facebook-pixel';\nimport { useEffect } from 'react';\n\nconst advancedMatching = { em: 'some@email.com' }; // Optional for advanced matching\nconst options = {\n  autoConfig: true, // Enables pixel's autoConfig\n  debug: false, // Disables logs\n};\n\nfunction App() {\n  useEffect(() => {\n    // Ensure window is defined before initializing (for SSR compatibility)\n    if (typeof window !== 'undefined') {\n      ReactPixel.init('yourPixelIdGoesHere', advancedMatching, options);\n      ReactPixel.pageView(); // Track initial page view\n    }\n  }, []);\n\n  const handleProductPurchase = (productId, price) => {\n    if (typeof window !== 'undefined') {\n      ReactPixel.track('Purchase', { value: price, currency: 'USD', content_ids: [productId], content_type: 'product' });\n    }\n  };\n\n  return (\n    <div>\n      <h1>My React App</h1>\n      <p>Welcome to the homepage. We track page views.</p>\n      <button onClick={() => handleProductPurchase('product123', 99.99)}>\n        Buy Product 123\n      </button>\n      <p>Please remember to handle GDPR consent explicitly.</p>\n      <button onClick={ReactPixel.grantConsent}>Accept Cookies</button>\n    </div>\n  );\n}\n\nexport default App;\n","lang":"javascript","description":"This quickstart demonstrates how to initialize the Facebook Pixel, track a page view on component mount, and trigger a custom 'Purchase' event. It also includes the crucial `typeof window !== 'undefined'` check for SSR compatibility and shows how to use the GDPR consent features."},"warnings":[{"fix":"Conditionally import the library or wrap its initialization and usage in `typeof window !== 'undefined'` checks. For CommonJS `require()`, specifically use `require('react-facebook-pixel').default` in non-browser environments. For Next.js, consider dynamic imports with `ssr: false`.","message":"The library directly accesses the `window` object, which causes `ReferenceError: window is not defined` errors during server-side rendering (SSR) or in Node.js environments like Next.js or during CI builds.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Call `ReactPixel.revokeConsent()` after initialization and then `ReactPixel.grantConsent()` only after the user explicitly accepts tracking cookies. This ensures no data is sent before consent is given.","message":"To ensure GDPR compliance, explicit consent management is required. The library provides `revokeConsent()` and `grantConsent()` methods, which developers must integrate into their UI/UX flow.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider migrating to actively maintained alternatives like `react-facebook` (which includes pixel tracking) or `react-use-facebook-pixel` for ongoing support and features. These alternatives offer better SSR support, modern React patterns (hooks), and updated type definitions.","message":"The `react-facebook-pixel` package has been effectively abandoned, with its last npm publication over five years ago (December 2020). This means it is unlikely to receive updates for new Facebook Pixel API changes, security vulnerabilities, or compatibility fixes for newer React versions.","severity":"deprecated","affected_versions":">=1.0.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Wrap `ReactPixel` calls in `if (typeof window !== 'undefined') { ... }` blocks. For Next.js, dynamic imports with `ssr: false` are often the most robust solution. When using CommonJS `require()`, use `require('react-facebook-pixel').default`.","cause":"The library directly references the global `window` object, which is not available in Node.js environments (e.g., server-side rendering in Next.js, Gatsby, or during build processes in CI).","error":"ReferenceError: window is not defined"},{"fix":"Ensure you are using `const ReactPixel = require('react-facebook-pixel').default;` when importing via CommonJS. If using ES Modules, `import ReactPixel from 'react-facebook-pixel';` is correct.","cause":"This error typically occurs when using CommonJS `require('react-facebook-pixel')` without explicitly accessing the `.default` export, especially in bundled environments or when the module's export structure is misunderstood.","error":"TypeError: src_default(...).track is not a function"},{"fix":"Add a global type declaration for `window.fbq` in your project (e.g., in a `global.d.ts` file) or use the `react-facebook-pixel` library's provided API which should have types. Example: `declare global { interface Window { fbq?: FacebookPixelFunction; } }`.","cause":"When directly interacting with `window.fbq` in TypeScript without proper global type declarations, the TypeScript compiler will report this error.","error":"Property 'fbq' does not exist on type 'Window'"}],"ecosystem":"npm"}