The useGeoVisibility hook allows the control of content such as banners/modals based on the users' geolocation.


The useGeoVisibility hook can be imported directly from the frontend-ui package, which is pre-installed in your Shogun Frontend store.

import { useGeoVisibility } from 'frontend-ui'


The useGeoVisibility hook accepts an array of countries where your content should be visible.


The countries array supports shorthands, like NL, CA, etc.

import React from 'react'
import { useGeoVisibility } from 'frontend-ui'

const MyComponent = () => {
  const countries = ['Australia', 'China']
  const { isVisible, hideBanner } = useGeoVisibility({

  return (
    isVisible && (
      <div className="disclaimer" aria-live="polite">
        <p>This is only visible for users in Australia and China.</p>
        <button className="close-button" onClick={}>
          <span aria-hidden="true">X</span>
          <span className="visibility-hidden">Close modal</span>

export default MyComponent

Return values

The useGeoVisibility hook returns an object containing 2 keys: isVisible and hideBanner.

isVisiblebooleanWhen true, the content should be visible for the specified countries.
hideBanner() => voidCallback function to set isVisible to false, hiding the content.