OnLinkNavigationProvider is a React context provider to externally control the link behavior of components further down the tree.
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.
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:
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.
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
onNavigationClick function inside the hook function uses the event access to preventDefault(). It could also be used to stopPropagation().
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.
Component quality checklist
Component is not currently available in Figma.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.