ZIndex

Purpose

In order to ensure correct stacking context of elements (tooltips inside of popovers, dropdowns inside of modals, etc), React context is used to track which element has highest stacking order.

Components will still work without the ZIndexProvider, but their z-index will not be automatically managed. You may have to manually set z-index yourself to get proper stacking order.

The following components use Portal, which in turn uses useZIndexContext:

Usage

ZIndexProvider

The ZIndexProvider uses the React context to expose the current z-index value to all of its children.

This provider should wrap your top level application component.

useZIndexContext

The useZIndexContext uses the React context to read the current z-index value from ZIndexProvider.

If you want to build a component that reads from the ZIndex context, you can use it as follows: