Hooks

Shopgate Engage provides React Hooks to make it easier for you to access features and information while developing your React components:

• useTheme
• useRoute
• useCurrentProduct
• useNavigation

---

useTheme

Retrieves the Theme API components directly in your React component.

Usage

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

function MyReactComponent() {
  const { View, AppBar } = useTheme();

  return (
    // your component output goes here.
  )
}

Returns

(Object) - The theme API containing theme specific, styled React components.

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

---

useRoute

Retrieves contextual information about the current route.

Usage

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

function MyReactComponent() {
  const { pathname, visible } = useRoute();

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

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

This example demonstrates how to get information about the current pathname and the visibility of the current route. This information can be used to control the render output of your component and is especially helpful for creating a Custom Route. You can find detailed instructions on Creating Custom Routes in the Shopgate Guides section.

Returns

(Object) - The route context information:

Name	Type	Description
visible	boolean	Indicates if 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 when navigating.

---

useCurrentProduct

Retrieves information about the currently viewed Product on a Product Detail Page.

Usage

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

function MyReactComponent() {
  const { productId, variantId } = useCurrentProduct();

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

Returns

(Object) 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 to 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 is selected.

useNavigation

Provides helper functions for easy navigation through the application.

Usage

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

function MyReactComponent() {
  const { push } = useNavigation();

  return (
    <button onClick={() => push({ pathname: '/some-link' })}>Click Me</button>
  )
}

Returns

(Object) An object containing navigation helpers:

Name	Parameters	Description
push	Receives the same arguments as the redux action.	Performs the historyPush navigation action.
pop	-	Performs the historyPop navigation action.
replace	Receives the same arguments as the redux action.	Performs the historyReplace navigation action.
reset	-	Performs the historyReset navigation action.
update	- 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.

useReduceMotion

Provides accessibility information in case user has activated “reduce motion” on the device.

Usage

import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
const reduceMotion = useReduceMotion();

Example

<video src={url} autoPlay={reduceMotion ? false : autoplay}> </video>