{"library":"logrocket-react","title":"LogRocket React Plugin","description":"LogRocket React Plugin (`logrocket-react`) is an optional add-on package designed to integrate LogRocket's session replay and monitoring capabilities specifically with React applications. It allows developers to search for user sessions based on interactions with specific React components within their app. The package is currently at version 7.0.0, supporting React 19. It maintains a distinct versioning scheme tied directly to major React versions, requiring users to install a specific `logrocket-react` version corresponding to their React installation (e.g., `v7` for React 19, `v6` for React 18). This tight coupling dictates its release cadence, typically aligning with new React major releases. A key differentiator is its reliance on the `displayName` property of React components for reporting component names, which often requires specific build tooling or manual intervention.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install logrocket-react"],"cli":null},"imports":["import LogRocketReact from 'logrocket-react';","import { setupLogRocketReact } from 'logrocket-react';","import LogRocket from 'logrocket';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport LogRocket from 'logrocket';\nimport LogRocketReact from 'logrocket-react';\n\n// Initialize LogRocket core first\nLogRocket.init(process.env.LOGROCKET_APP_ID ?? 'YOUR_APP_ID/YOUR_PROJECT_ID');\n\n// Then initialize the React plugin\nLogRocketReact.init(LogRocket);\n\ninterface ButtonProps {\n  onClick: () => void;\n  children: React.ReactNode;\n}\n\n// Ensure displayName is set for LogRocket to identify components\nconst MyButton = ({ onClick, children }: ButtonProps) => {\n  return (\n    <button onClick={onClick} style={{ padding: '10px 20px', cursor: 'pointer' }}>\n      {children}\n    </button>\n  );\n};\nMyButton.displayName = 'MyInteractiveButton'; // Critical for LogRocket component tracking\n\nconst App = () => {\n  const handleClick = () => {\n    console.log('Button clicked!');\n    LogRocket.track('UserClickedMyButton', { buttonName: 'MyInteractiveButton' });\n  };\n\n  return (\n    <div>\n      <h1>LogRocket React Integration</h1>\n      <p>This button interaction will be tracked by LogRocket.</p>\n      <MyButton onClick={handleClick}>Click Me</MyButton>\n    </div>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);","lang":"typescript","description":"This quickstart demonstrates how to initialize LogRocket and its React plugin, then render a simple React component that explicitly sets its `displayName` property, which is crucial for LogRocket's component tracking feature. It also shows how to manually track an event.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}