# code-snippets/4.0.0-beta.2/js/components/FeedbackReporter/HeadingBadge.tsx

Code Snippets, version 4.0.0-beta.2. 33 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/code/js/components/FeedbackReporter/HeadingBadge.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/raw/js/components/FeedbackReporter/HeadingBadge.tsx
- Modified: 2026-09-22T07:42:04+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/4.0.0-beta.2/code/js/components/FeedbackReporter/HeadingBadge.tsx#L10-L20`.

```tsx
import React, { useMemo } from 'react'
import { createPortal } from 'react-dom'
import { __ } from '@wordpress/i18n'

export interface HeadingBadgeProps {
	label: string
}

/** The page heading, wherever this screen happens to render one. */
const findHeading = (): Element | null =>
	document.querySelector('.wrap h1.wp-heading-inline') ??
	document.querySelector('#wpbody-content .wrap h1') ??
	document.querySelector('#wpbody-content h1')

export const HeadingBadge: React.FC<HeadingBadgeProps> = ({ label }) => {
	const heading = useMemo(findHeading, [])

	if (!label || !heading) {
		return null
	}

	return createPortal(
		<span
			className="code-snippets-feedback-badge"
			title={__('You are running a pre-release build. Use the Send feedback button if something breaks.', 'code-snippets')}
		>
			<span className="code-snippets-feedback-badge__dot" aria-hidden="true"></span>
			{label}
		</span>,
		heading
	)
}

```