Components & HoCs
To understand how theming works in BlueRain, it's important to understand how components and higher-order components (HoCs) interact.
A higher-order component's role is to wrap a regular component to pass it a specific prop (such as a list of posts, the current user, the Router object, etc.). You can think of HoCs as specialized assistants that each hand the component a tool it needs to do its job.
The first argument of set is the component's name, the second is the component itself, and any successive arguments will be interpreted as higher-order components and wrapped around the component.
For example, this is how you'd pass the currentUser object to the Logo component:
"Delayed" HoCs
There are a few subtle differences between registering a component with set and the more standard export default Foo and import Foo from './Foo.jsx' ES6 syntax.
First, you can only override a component if it's been registered using set. This means that if you're building any kind of theme or plugin and would like end users to be able to replace specific components, you shouldn't use import/export.
Second, both techniques also lead to different results when it comes to higher-order components (more on this below). If you write export withCurrentUser(Foo), the withCurrentUser function will be executed immediately, which will trigger an error because the fragment it depends on isn't properly initialized yet.
On the other hand, set('Foo', Foo, withCurrentUser) doesn't execute the function (note that we write withCurrentUser and not withCurrentUser()), delaying execution until app's initialization.
But what about HoC functions that take arguments? For example if you were to write:
The withList(options) would be executed immediately, and you would have no way of overriding the options object later on (a common use case being overriding a fragment).
For that reason, to delay the execution until the start of the app, you can use the following alternative syntax:
Add HOCs to existing Components
You can add new Hocs to the already registered components any time by using the addHocs method.
Last updated