Infers name from outer variable declaration and changes arrow function to named function
npm install @mx-bernhard/babel-plugin-react-higher-order-component-nameInfers name from outer variable declaration and changes arrow function to named function.
A simple transform to give functional React components that are supplied to a higher order function a name making debugging easier.
Transforms
``jshigherOrderFunction(${WrappedComponent.displayName ?? WrappedComponent.name})
const higherOrderFunction = (WrappedComponent) => {
const wrapper = () => {WrappedComponent};
return wrapper.displayName = ;
}
const Component = higherOrderFunction(() => hello);
`
to
`js
const higherOrderFunction = (WrappedComponent) => {WrappedComponent};
const Component = higherOrderFunction(function Component() { return hello });
`
Looking at the component tree in React dev tools, the two components will look like this:
```
higherOrderFunction(Component)
Component