Copy React Props to Your Clipboard in Google Chrome

While working on a React project today, I was looking to copy a property passed down to a component. After searching around, I found out it’s surprisingly easy.

1. Open up the React Developer Tools tab within the Chrome inspector.
2. Select the component or element which contains the property you want to copy.
3. Right-click the {…} and select Store as global variable from the menu.
4. Navigate to the console tab.
5. You will notice a global variable was added with a naming convention similar to $tmp or temp1.
6. Copy the value to your clipboard by typing copy($tmp) into the console.

What’s great about this trick is almost any value which has the {…} beside it within the Chrome inspector can be set as a global variable. Therefore, this method is not limited to the React Developer Tools.