# code-snippets/3.10.2/js/components/common/ScreenMetaSlot.tsx

Code Snippets, version 3.10.2. 40 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.2/code/js/components/common/ScreenMetaSlot.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.2/raw/js/components/common/ScreenMetaSlot.tsx
- Modified: 2026-08-24T09:37:00+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/3.10.2/code/js/components/common/ScreenMetaSlot.tsx#L10-L20`.

```tsx
import React, { useEffect } from 'react'

const SLOT_ID = 'snippets-screen-meta-slot'

export interface ScreenMetaSlotProps {
	hidden?: boolean
}

/**
 * Relocates the WordPress Screen Options and Help tabs (and their panels)
 * from above the page content into this slot, so they appear directly below
 * the page's subnavigation bar. The slot div is rendered empty by React and
 * never reconciled with children, so adopting the foreign nodes is safe.
 * The nodes are returned to the top of the page when the slot unmounts.
 *
 * Stays mounted (with `hidden`) rather than being conditionally rendered by
 * the caller: unmounting hands the adopted nodes back to their native,
 * visible position at the top of the page instead of hiding them.
 */
export const ScreenMetaSlot: React.FC<ScreenMetaSlotProps> = ({ hidden = false }) => {
	useEffect(() => {
		const slot = document.getElementById(SLOT_ID)
		const meta = document.getElementById('screen-meta')
		const links = document.getElementById('screen-meta-links')

		if (!slot || !meta || !links) {
			return undefined
		}

		const parent = meta.parentElement
		slot.append(meta, links)

		return () => {
			parent?.prepend(meta, links)
		}
	}, [])

	return <div id={SLOT_ID} className="snippets-screen-meta-slot" hidden={hidden} />
}

```