Short version
How can I modify a React component with a user script (e.g. code injected by Tampermonkey) without breaking the app when I don't have access to the original source?
Longer version
Modifying the DOM of a React component directly can break the app because the reconciliation algorithm can get confused by manual DOM changes. Hence, I would like to modify a React component in my user script so React can keep rendering unhindered.
In a simple setup, React discovers components in the global namespace, and we can modify a component easily (see this fiddle for a working example):
oldComponent = Component
function Component(props) {
// modify the props to change the appearance of the component
return oldComponent(modifiedProps);
}
However, the situation is more complex when the application is deployed because the components are typically bundled using webpack. How would I be able to reproduce the example above in an application whose components have been bundled?
