OnLinkNavigationProvider

OnLinkNavigationProvider is an optional React context provider to externally control the link behaviour of components further down the tree

Props

Component props
Name
Type
Default
onNavigation
({| href: string, target?: null | "self" | "blank" }) => ?({|+event: SyntheticEvent<>|}) => void |}
-

If passed, it replaces the default link behavior with custom on navigation behavior. See custom navigation contex variant for examples.

Variants

Components with links use simple <a> tags. In order to replace the default link behavior with custom ones (e.g. react-router), onNavigation provides an interface to pass external logic into the 'onClick' event handler in children links.

This example illustrates a custom navigation implementations to externally control the link functionality of Link: setting a default navigation logic with OnLinkNavigationProvider.

If onNavigation prop is passed to OnLinkNavigationProvider, it's passed down to all children links and sets a customized default link navigation behavior. onNavigation is a higher-order function: it takes named arguments: href and target and returns an event handler function. In the component's onClick event handler, the onClick prop gets called first, followed by the function passed down by the OnLinkNavigationProvider.

If onNavigation is a hook function, it can contain complex logic, including React hooks, to perform side effects.

In this example, the useOnNavigation hook function is passed to OnLinkNavigationProvider and executes the following actions:

  • Disable the default link behavior
  • Show an alert message
  • Open a different URL in a new window

The returned onNavigationClick function inside the hook function uses the event access to preventDefault(). It could also be used to stopPropagation().

Examples from start to end: Link, Button, IconButton, TapArea
Navigation type:

Examples from top to bottom: Callout, Upsell, ActivationCard
Navigation type:

Your business account was created!

Apply to the Verified Merchant Program!

Give $30, get $60 in ads credit

Earn $60 of ads credit, and give $30 of ads credit to a friend
Not started

Claim your website

Grow distribution and track Pins linked to your website
With a Dropdown
Navigation type:

Link / Button / IconButton / TapArea / DropDown / Callout / Upsell / ActivationCard
If these components are under a OnLinkNavigationProvider, their link behavior defaults to the logic defined in OnLinkNavigationProvider. In order to disable the onNavigation logic, we can return "dangerouslyDisableOnNavigation" in the onClick callback. See each component page for more information.