Host Context Data

Almost every application needs some context to run. Microfrontends are not an exception, FrontHub resolved this problem by enabling you to consumes a centralized context data from Application Host.

How to configure

The application context could be anything that you want to. You are free to use the context according to your application needs. The context can be a JavaScript object, a Promise, or even an API call. You can define roles in your context if you want. The roles defined in the context will be parsed by the rbac object.

In the Application Host, the context should be configured in one of the following options:

As object

fronthub('configure', {
  repository: 'https://front-hub-repository-url.com',
  context: {
    user: {
      id: '12345',
      name: 'Michael Scott',
      account: {
        name: 'Dunder Mifflin',
      },
    },
  },
})

As function

fronthub('configure', {
  repository: 'https://front-hub-repository-url.com',
  context: () => {
    return {
      user: {
        id: '12345',
        name: 'Michael Scott',
        account: {
          name: 'Dunder Mifflin',
        },
      },
    }
  },
})

As async function (API call)

fronthub('configure', {
  repository: 'https://front-hub-repository-url.com',
  context: async () => {
    return fetch('https://api-example.com/context').then(response =>
      response.json(),
    )
  },
})

As Promise

fronthub('configure', {
  repository: 'https://front-hub-repository-url.com',
  context: new Promise((res, rej) => {
    return res({
      user: {
        id: '12345',
        name: 'Michael Scott',
        account: {
          name: 'Dunder Mifflin',
        },
      },
    })
  }),
})

Development environment

Microfrontend's front-hub.config.js file allows you to define a context to use in the development environment. In the production environment, where only the host's defined context will be used, it will be ignored. Locally, this value should be a plain object, any function or class as the value will be ignored.

How to use

To use the context inside your microfrontend you need to import the useHostContext hook as the following:

import { useHostContext } from '@resultadosdigitais/front-hub/react'

function MyComponent() {
  const { user } = useHostContext()

  return (
    <>
      <p>User: {user.firstName}</p>
      <p>Account: {user.account.name}</p>
    </>
  )
}

warning

If your context data source is asynchronous, you should use the optional chaining to validate the existence of the properties, since a side effect will be used in this scenario to update the context, it may initially appear to be an empty object.

If you need to use it in a component as a class, you can use the HOC instead:

import { withHostContext } from '@resultadosdigitais/front-hub/react'

class MyComponent extends React.Component {
  render() {
    const { user } = this.props

    return (
      <>
        <p>User: {user.name}</p>
        <p>Account: {user.account.name}</p>
      </>
    )
  }
}

export default withHostContext(MyComponent)

The values returned from useHostContext and withHostContext are only those present in the context of the Application Host. Properties passed from the requireMicrofrontend command or Microfrontend component props are not available here (this values should be access from Connect component props.).