DEV Community

Azizi Yazit
Azizi Yazit

Posted on

Higher Order Component enabled by Ivy

Higher Order Component - HOC

A higher-order component (HOC) is an advanced technique for reusing component logic. Concretely, a higher-order component is a function that takes a component and returns a new component.

Angular HOC

Below is sample HOC withTheme and obviously the code received the component, insert the theme data and return decorated component. Annotated or attached the HOC to the class component is called meta-programming using typescript decorator.

Meta-programming is a technique by which you can modify the code dynamically at runtime.

Alt Text

And below is the HOC usage

Alt Text

Be creative

Ivy is enabler, it enabled HOC and Meta-programming. Be creative, there's so many use-cases can be cater by HOC.

Here is an example of enabling CSS-in-JS using HOC withStyles

Alt Text

And here is some ideas:

withAuth

return auth data if user have been authenticated

withRouter

return a router data

withProvider

return provider reference

Code repository

Check the codes here https://github.com/abumuawiyah/ng-ivy

Top comments (0)