Overview

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

Import

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

JSX

import { useGeoVisibility } from 'frontend-ui'

Usage

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({
    countries
  })

  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>
        </button>
      </div>
    )
  )
}

export default MyComponent

Return values

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

name	type	description
`isVisible`	`boolean`	When `true`, the content should be visible for the specified countries.
`hideBanner`	`() => void`	Callback function to set `isVisible` to false, hiding the content.

useIntersection

ResponsiveBackgroundImage

useStore

Best Practices

CMS and Sections