EmbedEditor

import { EmbedEditor } from '@embededitor/full/react';

<EmbedEditor {...props} />

​

Props

​

Attributes

<EmbedEditor
	aria-label='Photo editor'
	data-testid='photo-editor'
	src={src}
/>

​

Ref

const editor = useRef<EmbedEditorHandle>(null);

<EmbedEditor
	ref={editor}
	src={src}
/>

​

Behavior

• Size. In the default layout='inline', the editor fills the box its parent gives it, so give the parent a height, and at least 320 px of width. With layout='page', it covers the whole viewport.
• Read at open. src and state are read when the editor opens. Once an image is on screen, give the editor a new key to open another one.
• Stable source. Memoize src. A new object on every render, such as URL.createObjectURL(file) written inline, restarts the load each time the host renders while the image loads.
• Next.js. The entry starts with 'use client', so a server component can render EmbedEditor directly. Callbacks such as onProcess need a client component around it.

​

Example

import { EmbedEditor } from '@embededitor/full/react';
import type { EditState } from '@embededitor/full/react';

const upload = async ({ dest, state }: { dest: File; state: EditState }) => {
	const body = new FormData();

	body.append('file', dest);
	body.append('state', JSON.stringify(state));
	await fetch('/api/photos', { body, method: 'POST' });
};

const PhotoEditor = ({ src }: { src: string }) => (
	<div style={{ height: 600 }}>
		<EmbedEditor
			lang='en-us'
			onProcess={upload}
			src={src}
		/>
	</div>
);

export default PhotoEditor;