Hex Core JS
    Preparing search index...

    Function StackingLayer

    • Provides a StackingContext to descendants. To use in a custom floating element, consume the StackingContext, then add the desired z-index value to the stackIndex from the StackingContext, then pass the computed z-index to the <StackingLayer> and to the component via the style prop. See StackingContext for more details.

      Parameters

      Returns Element

      function FloatingElement() {
          const zIndex = useStackIndex(100);

          return (
              <StackingLayer index={zIndex}>
                  <div style={{ zIndex }}>
                      My floating element
                  </div>
              </StackingLayer>
          )
      }

      function FloatingElement() {
           const zIndex = useMaxStackIndex(100);

           return (
              <StackingLayer index={zIndex}>
                  <div style={{ zIndex }}>
                      My floating element
                  </div>
              </StackingLayer>
           )
      }

    Settings

    Member Visibility