# code-snippets/3.10.0-beta.1/js/components/common/ScreenMetaSlot.tsx

Code Snippets, version 3.10.0-beta.1. 32 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/code/js/components/common/ScreenMetaSlot.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/raw/js/components/common/ScreenMetaSlot.tsx
- Modified: 2026-08-04T13:38:10+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.0-beta.1/code/js/components/common/ScreenMetaSlot.tsx#L10-L20`.

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

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

/**
 * 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.
 */
export const ScreenMetaSlot: React.FC = () => {
	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" />
}

```