React plugin

Optional add-on plugin allowing you to search for sessions by React component click

The LogRocket React plugin allows you to search for sessions where the user clicks a specific component in your app:

  1. Install the LogRocket React package and babel plugin:
npm i --save babel-plugin-add-react-displayname

// If using React 16.10
npm i --save [email protected]

// If using React 16.5
npm i --save [email protected]

// If using React 16.4
npm i --save [email protected]

// If using React <16.4+
npm i --save [email protected]

// If using React 0.14.0 or React 15:
npm i --save [email protected]^0.0.5
  1. Add the add-react-displayname plugin to your babel config. This ensures that component names are not minified in production.
npm i --save babel-plugin-add-react-displayname
  presets: [ ... ],
  plugins: ["add-react-displayname"],
  1. Call LogRocket with the logrocket-react package:
import LogRocket from 'logrocket';
import setupLogRocketReact from 'logrocket-react';


That's it! You can now search for sessions which contain clicks on specific React components. See Understanding User Flows for more information on using LogRocket to understand your customer experience.


The LogRocket React plugin does not support Next.JS. You can still use all of the core LogRocket functionality with NextJS, but you won't be able to search for sessions by clicked on React component.