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 specialised 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 register 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 register. 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 initialised yet.

On the other hand, register doesn't execute the function (note that we write withCurrentUser and not withCurrentUser()), delaying execution until app's initialisation.

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.

React as a UI library puts a lot of emphasis on components. BlueBase stores components which can be dynamically used and replaced. This plays a major role in creating a pluggable and modular system.

There are many ways to register new components in BlueBase:

Through a Plugin

The easiest way to add a new component to BlueBase is to use the 'components' property of your plugin:

import { View } from '@bluebase/core';
​
const Logo = props => {
  return (
    <View>/* component code */</View>
  )
}
​
const Plugin = {
​
    name: 'Example Plugin',
    key: 'example-plugin',
​
    components: {
      Logo
    }
}

Note that this may replace any existing components registered with same name.

Through Registry API

You can add new Components anywhere in the code by calling the set method of ComponentRegistry:

const Logo = props => {
  return (
    <View>/* component code */</View>
  )
}
​
await BB.Components.register('Logo', Logo);

Through resolve method

In order to access a BlueBase component, just use the resolve method of Component Registry.

const Logo = BB.Components.resolve('Logo');

This will return a component wrapped in all the HOCs, and will receive a styles prop that has all the themed styles.

But in order to get access this component in your code, you will need to use a BlueBaseConsumer component to access BB context first. This is how the final code may look like:

import { BlueBase, BlueBaseConsumer } from '@bluebase/core';

const Header = () => (
    <BlueBaseConsumer>
    {(BB: BlueBase) => {
        const Logo = BB.Components.resolve('Logo');
        return <Logo />;
    }}
    </BlueBaseConsumer>
);

This adds unnecessarily long and repetitive code. Not to mention the overall ugliness and unreadability. To solve this problem, we export a helper function called getComponent .

Through getComponent function

The getComponent function returns a component from BlueBase context. By using this function we can rewrite the example above as:

import { getComponent } from '@bluebase/core';

const Logo = getComponent('Logo');

const Header = () => (<Logo />);

See how this makes the code much more developer friendly.

It is also possible to get a typed component by providing it props interface:

import { getComponent } from '@bluebase/core';

interface LogoProps {
    // ... props
}

const Logo = getComponent<LogoProps>('Logo');

To make it even more convenient, we export some basic components out of box. This helps developers not only write even less code, but also port react-native apps to BlueBase by just changing the import statement.

- import { Image, Text, View } from 'react-native';
+ import { Image, Text, View } from '@bluebase/components';

Fallback Components

Sometimes, you may need to have fallback components. So if they desired component is not found, a back up component can be used. In BlueBase it is very easy to achieve this. Just provide multiple arguments to the resolve function.

const Logo = BB.Components.resolve('AnimatedLogo', 'SingleColorLogo', 'Logo');

The first param acts as the key of the desired, with the following ones acting at fallback components in sequence.

So in the example above, first BlueBase will try to find AnimatedLogo . If it doesn't exist, BlueBase will look for SingleColorLogo . If even that isn't found, it will try to get Logo component.

This works with the getComponent function. So the code above can be written as:

const Logo = getComponent('AnimatedLogo', 'SingleColorLogo', 'Logo');

Accessing Raw Components

As explained in the above, the resolve method returns a component wrapped in the registered HOCs, and styles. But sometimes, you may need to access the raw component that was originally registered.

For that reason, BlueRain provides a getValue method that lets you access the unwrapped “raw” component.

const rawLogoComponent = await BB.Components.getValue('Logo');

Note that, we used the await keyword. This is because the getValue method will return the component wrapped in a promise. This is because some components may in different bundles (because of code splitting).

Each component in BlueBase has the following properties:

Structure

const Logo = props => {
  return (
    <View>/* component code */</View>
  )
}
​
await BB.Components.register({
  key: 'Logo',
  value: Logo,
  preload: true,
  hocs: [withRouter],
  styles: {},
  source: {},
});