How to use @fluentui/react-component-ref - 10 common examples

<>
          
          {isSelecting && (
            
          )}
          {isSelecting && fiberNav && fiberNav.domNode && (
            
          )}
          {isSelecting && fiberNav && }
          {selectedFiberNav && }
          {!isSelecting && fiberNav && fiberNav.instance && (

renderComponent({
    accessibility,
    ElementType,
    classes,
    styles,
    variables,
    unhandledProps,
    rtl,
  }): React.ReactNode {
    const windowRef = toRefObject(this.context.target.defaultView)

    this.rtl = rtl
    const { children, items, overflow, overflowItem } = this.props

    if (!overflow) {
      return (
        
          {childrenExist(children) ? children : this.renderItems(items, variables)}
        
      )
    }

tooltipPositionClasses: string,
    rtl: boolean,
    accessibility: ReactAccessibilityBehavior,
  ): JSX.Element {
    const { align, position, target, offset } = this.props
    const { open } = this.state

    return (
      
    )
  }

popupPositionClasses: string,
    rtl: boolean,
    accessibility: ReactAccessibilityBehavior,
  ): JSX.Element {
    const { align, position, offset, target, unstable_pinned } = this.props

    return (
      
    )
  }

rtl: boolean,
    accessibility: ReactAccessibilityBehavior,
    { placement, scheduleUpdate }: PopperChildrenProps,
  ) => {
    const {
      content: propsContent,
      renderContent,
      contentRef,
      mountDocument,
      pointing,
      trapFocus,
      autoFocus,
    } = this.props

    const content = renderContent ? renderContent(scheduleUpdate) : propsContent
    const targetRef = toRefObject(mountDocument || this.context.target)

    const popupContent = Popup.Content.create(content || {}, {
      defaultProps: () => ({
        ...(rtl && { dir: 'rtl' }),
        ...accessibility.attributes.popup,
        ...accessibility.keyHandlers.popup,
        className: popupPositionClasses,
        ...this.getContentProps(),
        placement,
        pointing,
        pointerRef: this.pointerTargetRef,
        trapFocus,
        autoFocus,
      }),
      overrideProps: this.getContentProps,
    })

render() {
    const { mountDocument } = this.props
    const { fiberNav, selectedFiberNav, isSelecting, debugPanelPosition } = this.state

    if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
      return (
        <>
          
          {isSelecting && (
            
          )}
          {isSelecting && fiberNav && fiberNav.domNode && (

renderComponent({ ElementType, classes, accessibility, unhandledProps, styles, rtl }) {
    const {
      active,
      activeIndicator,
      children,
      content,
      disabled,
      submenuIndicator,
      icon,
      menu,
      popup,
      wrapper,
    } = this.props
    const { menuOpen } = this.state

    const targetRef = toRefObject(this.context.target)

    const elementType = (
      
        {childrenExist(children) ? (
          children
        ) : (
          <>
            {Icon.create(icon, {
              defaultProps: () => ({ xSpacing: !!content ? 'after' : 'none' }),

renderComponent({ ElementType, classes, unhandledProps, accessibility, variables }) {
    const { icon, children, disabled, popup, menu, menuOpen, wrapper } = this.props
    const targetRef = toRefObject(this.context.target)

    const itemElement = (
      
        {childrenExist(children) ? children : Icon.create(icon)}
      
    )
    const submenuElement = menuOpen ? (

innerRef={(inputElement: HTMLElement) => {
                handleRef(this.inputRef, inputElement)
                handleRef(inputRef, inputElement)
              }}
            >

innerRef={(inputElement: HTMLElement) => {
              handleRef(this.inputRef, inputElement)
              handleRef(inputRef, inputElement)
            }}
          >