# code-snippets/3.10.0/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx

Code Snippets, version 3.10.0. 58 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.0/code/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.0/raw/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
- Modified: 2026-08-24T09:38:40+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/code/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx#L10-L20`.

```tsx
import { __, sprintf } from '@wordpress/i18n'
import React from 'react'
import { Button } from '../../common/Button'
import { useSnippetsFilters } from './WithSnippetsTableFilters'

export const SearchArea = () => {
	const { searchQuery, setSearchQuery } = useSnippetsFilters()

	return (
		<search className="snippets-search-area">
			<form
				className="search-box"
				aria-label={__('Search Snippets', 'code-snippets')}
				onSubmit={event => {
					event.preventDefault()
				}}
			>
				<input
					type="search"
					id="snippets_search"
					name="s"
					value={searchQuery ?? ''}
					aria-label={__('Search Snippets:', 'code-snippets')}
					onChange={event => setSearchQuery(event.target.value)}
					placeholder={__('Search snippets', 'code-snippets')}
				/>
			</form>
		</search>
	)
}

export const SearchResultsIndicator = () => {
	const { searchQueryText, searchLineNumber, currentTag, setSearchQuery, setCurrentTag } = useSnippetsFilters()

	return searchQueryText || currentTag
		? <p className="snippets-search-subtitle">
			{__('Search results', 'code-snippets')}

			{/* translators: %s: search query. */}
			{searchQueryText && sprintf(__(' for “%s”', 'code-snippets'), searchQueryText)}

			{/* translators: %d: code line number. */}
			{searchLineNumber && sprintf(__(' on line “%d”', 'code-snippets'), searchLineNumber)}

			{/* translators: %s: tag name. */}
			{currentTag && sprintf(__(' in tag “%s”', 'code-snippets'), currentTag)}

			{' '}
			<Button small className="clear-filters" onClick={() => {
				setSearchQuery()
				setCurrentTag()
			}}>
				{__('Clear Filters', 'code-snippets')}
			</Button>
		</p>
		: null
}

```