Connect

The Connect function is used on the entry point file and should be exported as default. It allows your application to be rendered and connected to the Application Host.

export default Connect(component, addon?)

Options

component

Is a required parameter to define a function or class component to be rendered.

Props

This component's props is the object from requireMicrofrontend command or Microfrontend component props. Here you can check how to pass on props to your micro frontend:

• Microfrontend component
• requireMicrofrontend command

addon

Is a optional parameter to define the FrontHub addon configurations.

intlFormatting

warning

This process is deprecated, please check G11n docs for your localization flow.

Accepts a Higher-Order Function that handle the i18next formatting.

The first function receives:

• config - An object containing the FrontHub intl configuration
• context - An object containing the FrontHub context configuration

The second function receives:

• value - The current value to be interpolated
• format - The custom format defined in the second argument of the translation
• lng - The current language configured

Check out the Localization documentation to learn more.

Usage

The following code presents a basic example of using the Connect function:

src/index.js

import { Connect } from '@resultadosdigitais/front-hub/react'
import { Theme, Reset } from '@resultadosdigitais/tangram-components'

import App from './App'

export default Connect(props => (
  <Theme>
    <Reset />
    <App {...props} />
  </Theme>
))

This other example shows the configuration of the intlFormatting addon:

src/index.js

import { Connect } from '@resultadosdigitais/front-hub/react'
import { Theme, Reset } from '@resultadosdigitais/tangram-components'

import App from './App'

export default Connect(
  props => (
    <Theme>
      <Reset />
      <App {...props} />
    </Theme>
  ),
  {
    intlFormatting: (config, context) => {
      return (value, format, lng) => {
        // format and then return
        return value
      }
    },
  },
)