HOCs

Shopgate ENGAGE provides Higher Order Components (HOCs) to make it easier for you to access features and information while developing your React components:

• withTheme
• withRoute
• withCurrentProduct
• withNavigation

---

withTheme

Passes the Theme API components directly into your React component.

Usage

import { withTheme } from '@shopgate/engage/core';

function MyReactComponent({ View, AppBar }) {
  return (
    // your component output goes here.
  )
}

export default withTheme(MyReactComponent);

Adds

The theme API containing theme specific styled React components.

You can find more detailed information about the components in the Theme API documentation.

---

withRoute

Passes contextual information about the current route into your React component.

Usage

import { withRoute } from '@shopgate/engage/core';

function MyReactComponent({ pathname, visible }) {
  if (pathname !== '/some-route' || !visible) {
    return null;
  }

  return (
    // You component output goes here.
  );
}

export default withRoute(MyReactComponent);

In this example you can see how you can get information about the current pathname and the visibility of the current route. This can be used to control the render output of your component and is especially helpful for creating a Custom Route.

Adds

The route context information:

Name	Type	Description
visible	boolean	Whether the route is visible in the app.
pathname	string	The current route’s pathname.
location	string	The full history location of the current route.
params	Object	The route parameters that are specified in the route’s pattern.
query	Object	The GET parameters.
state	Object	Custom data that can be passed to a route on when navigating.

---

withCurrentProduct

Passes information about the currently viewed Product on a Product Detail Page to your React Component.

Usage

import { withCurrentProduct } from '@shopgate/engage/core';

function MyReactComponent({ productId, variantId }) {
  return (
    // You component output goes here.
  );
}

export default withCurrentProduct(MyReactComponent);

Adds

The product information:

Name	Type	Description
productId	string	The product ID.
variantId	string	The product ID of a variant if the current product is a selected variant.
options	Object	The selected product options.
optionsPrices	Object	The price values of the selected product options.
currency	string	The currency code of the product.
conditioner	Conditioner	Helps you control the dependencies between multiple possible variant selections. This also controls if a product can only be added to the cart if a specific type of variant has been selected.

withNavigation

Passes helper functions for easy navigation into your React Component.

Usage

import { withNavigation } from '@shopgate/engage/core';

function MyReactComponent({ historyPush }) {
  return (
    <button onClick={() => historyPush({ pathname: '/some-link' })}>Click Me</button>
  );
}

export default withNavigation(MyReactComponent);

Adds

The navigation helper functions:

Name	Parameters	Description
historyPush	Receives the same arguments as the redux action.	Performs the historyPush navigation action.
historyPop	-	Performs the historyPop navigation action.
historyReplace	Receives the same arguments as the redux action.	Performs the historyReplace navigation action.
historyReset	-	Performs the historyReset navigation action.
historyUpdate	- state (Object) required: The state to be updated on the desired Route. - routeId (string): The ID of the route to update.	Updates a certain (usually the current) route’s meta state object with new data.