Since BlueBase is build using React's context functionality, it is possible to access the BlueBase context (often referred to as BB) using the same API used by any other context consumer. This is done by using the BlueBaseConsumer component.

Usage

Use it just like any other react component.

This is the main app in the BlueBase framework. It is just a React Component, and can either be used as the top most component of your project or it can be embedded in your existing code base.

This component takes care of initialisation and renders the ⛩Main App Layout. If children prop is provided, then it renders the children prop instead of the Main App Layout.

Usage

Use it just like any other react component.

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

export const App = () => (
    <BlueBaseApp
        components={{ /* Components Collection */ }}
        configs={{ /* Configs Collection */ }}
        filters={{ /* Filters Collection */ }}
        plugins={{ /* Plugin Collection */ }}
        themes={{ /* Theme Collection */ }}
    />
);

Custom Context

Sometimes, you may want to use custom context. This is especially important when some system functionality may need to be modified before the boot process.

Just create a new object of BlueBase class. And send pass it to the BlueBaseApp component as BB prop when ready.

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

const BB = new BlueBase();

// Custom business logic on BB object. i.e. Add filters, etc.

export const App = () => (<BlueBaseApp BB={BB} />);

Children

If children are provided to this component, then the children node is rendered instead of ⛩Main App Layout. The child components can use BlueBaseConsumer to access BlueBase context.

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

export const App = () => (
    <BlueBaseApp>
        {/* This child component will have access to BlueBase context */}
        <CustomComponent />
    </BlueBaseApp>
);

Properties

BlueBase ships with 3 system level components. They play a core part in how the framework works.

1. BlueBaseApp

2. BlueBaseConsumer

3. BlueBaseFilter