# code-snippets/4.0.0-beta.1/js/components/EditMenu/EditorSidebar/actions/ExportButtons.tsx

Code Snippets, version 4.0.0-beta.1. 57 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/code/js/components/EditMenu/EditorSidebar/actions/ExportButtons.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/raw/js/components/EditMenu/EditorSidebar/actions/ExportButtons.tsx
- Modified: 2026-06-19T15:56:12+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.1/code/js/components/EditMenu/EditorSidebar/actions/ExportButtons.tsx#L10-L20`.

```tsx
import React from 'react'
import { __ } from '@wordpress/i18n'
import { useSnippetsAPI } from '../../../../hooks/useSnippetsAPI'
import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
import { downloadSnippetExportFile } from '../../../../utils/files'
import { Button } from '../../../common/Button'
import type { SnippetsExport } from '../../../../types/schema/SnippetsExport'
import type { Snippet } from '../../../../types/Snippet'

interface ExportButtonProps {
	name: string
	label: string
	makeRequest: (snippet: Snippet) => Promise<SnippetsExport | string>
}

const ExportButton: React.FC<ExportButtonProps> = ({ name, label, makeRequest }) => {
	const { snippet, isWorking, setIsWorking, handleRequestError } = useSnippetForm()

	const handleClick = () => {
		setIsWorking(true)

		makeRequest(snippet)
			.then(response => downloadSnippetExportFile(response, snippet))
			// translators: %s: error message.
			.catch((error: unknown) => handleRequestError(error, __('Could not download export file.', 'code-snippets')))
			.finally(() => setIsWorking(false))
	}

	return (
		<Button name={name} onClick={handleClick} disabled={isWorking}>
			{label}
		</Button>
	)
}

export const ExportButtons: React.FC = () => {
	const api = useSnippetsAPI()

	return (
		<div className="snippet-export-buttons">
			<ExportButton
				name="export_snippet"
				label={__('Export', 'code-snippets')}
				makeRequest={api.export}
			/>

			{window.CODE_SNIPPETS_EDIT?.enableDownloads
				? <ExportButton
					name="export_snippet_code"
					label={__('Download Code', 'code-snippets')}
					makeRequest={api.exportCode}
				/>
				: null}
		</div>
	)
}

```