Overview
The useYooptaPluginOptions hook provides access to the options configured for a specific plugin. This is useful for accessing custom plugin settings, display properties, or other configuration values within plugin components.
Usage
import { useYooptaPluginOptions } from '@yoopta/editor';
function CustomPluginComponent() {
const options = useYooptaPluginOptions('Paragraph');
return (
<div>
<h3>{options?.display?.title}</h3>
<p>{options?.display?.description}</p>
</div>
);
}
Signature
function useYooptaPluginOptions<TOptions>(
pluginType: string
): PluginOptions<TOptions>
Parameters
The type identifier of the plugin (e.g., “Paragraph”, “HeadingOne”, “Image”)
Type Parameters
Optional type parameter for custom plugin options. Allows for type-safe access to plugin-specific options.
Returns
PluginOptions<TOptions> - The plugin options object
Plugin Options Structure
The base PluginOptions type includes:
type PluginOptions<T> = Partial<{
display?: {
title?: string; // Plugin display name
description?: string; // Plugin description
icon?: ReactNode; // Plugin icon
};
shortcuts?: string[]; // Keyboard shortcuts
HTMLAttributes?: HTMLAttributes<HTMLElement>; // HTML attributes
} & T> // Custom plugin-specific options
Examples
Access Display Properties
function PluginMenuItem({ pluginType }: { pluginType: string }) {
const options = useYooptaPluginOptions(pluginType);
return (
<div className="plugin-menu-item">
{options?.display?.icon}
<div>
<h4>{options?.display?.title || pluginType}</h4>
<p>{options?.display?.description}</p>
</div>
</div>
);
}
Show Keyboard Shortcuts
function PluginShortcuts({ pluginType }: { pluginType: string }) {
const options = useYooptaPluginOptions(pluginType);
if (!options?.shortcuts?.length) return null;
return (
<div className="shortcuts">
<span>Shortcuts:</span>
{options.shortcuts.map((shortcut) => (
<kbd key={shortcut}>{shortcut}</kbd>
))}
</div>
);
}
Type-Safe Custom Options
// Define custom options type
type ImagePluginOptions = {
maxWidth?: number;
allowedFormats?: string[];
uploadEndpoint?: string;
};
function ImageUploader() {
const options = useYooptaPluginOptions<ImagePluginOptions>('Image');
const maxWidth = options?.maxWidth || 1200;
const allowedFormats = options?.allowedFormats || ['jpg', 'png', 'gif'];
const endpoint = options?.uploadEndpoint || '/api/upload';
return (
<div>
<p>Max width: {maxWidth}px</p>
<p>Allowed formats: {allowedFormats.join(', ')}</p>
<p>Upload to: {endpoint}</p>
</div>
);
}
Conditional Rendering Based on Options
type VideoPluginOptions = {
enableAutoplay?: boolean;
showControls?: boolean;
};
function VideoPlayer({ src }: { src: string }) {
const options = useYooptaPluginOptions<VideoPluginOptions>('Video');
return (
<video
src={src}
autoPlay={options?.enableAutoplay ?? false}
controls={options?.showControls ?? true}
/>
);
}
Access HTML Attributes
function PluginWrapper({ children, pluginType }) {
const options = useYooptaPluginOptions(pluginType);
const htmlAttrs = options?.HTMLAttributes || {};
return (
<div {...htmlAttrs} className="plugin-wrapper">
{children}
</div>
);
}
Build Plugin Selector
function PluginSelector() {
const editor = useYooptaEditor();
const pluginTypes = Object.keys(editor.plugins);
return (
<div className="plugin-selector">
{pluginTypes.map((type) => (
<PluginOption key={type} pluginType={type} />
))}
</div>
);
}
function PluginOption({ pluginType }: { pluginType: string }) {
const options = useYooptaPluginOptions(pluginType);
const editor = useYooptaEditor();
const handleClick = () => {
editor.insertBlock({ type: pluginType });
};
return (
<button onClick={handleClick} className="plugin-option">
{options?.display?.icon}
<span>{options?.display?.title || pluginType}</span>
</button>
);
}
Custom Theme from Options
type ThemeOptions = {
primaryColor?: string;
backgroundColor?: string;
borderRadius?: number;
};
function ThemedBlock({ pluginType, children }) {
const options = useYooptaPluginOptions<ThemeOptions>(pluginType);
return (
<div
style={{
backgroundColor: options?.backgroundColor || '#fff',
borderLeft: `4px solid ${options?.primaryColor || '#000'}`,
borderRadius: `${options?.borderRadius || 0}px`,
padding: '16px',
}}
>
{children}
</div>
);
}
Validate Plugin Configuration
type CodePluginOptions = {
theme?: string;
languages?: string[];
lineNumbers?: boolean;
};
function CodeBlockSettings() {
const options = useYooptaPluginOptions<CodePluginOptions>('Code');
const hasValidConfig = useMemo(() => {
return (
options?.languages &&
options.languages.length > 0 &&
options.theme !== undefined
);
}, [options]);
if (!hasValidConfig) {
return <div className="warning">Code plugin not properly configured</div>;
}
return (
<div>
<p>Theme: {options.theme}</p>
<p>Languages: {options.languages.join(', ')}</p>
<p>Line numbers: {options.lineNumbers ? 'Yes' : 'No'}</p>
</div>
);
}
Use Cases
- Plugin UI Customization: Access display properties for rendering plugin UI
- Configuration Access: Get plugin-specific settings and options
- Keyboard Shortcuts: Display or implement plugin shortcuts
- Theme Customization: Access theme-related plugin options
- Feature Flags: Check if certain plugin features are enabled
- Validation: Validate plugin configuration before use
- Dynamic Behavior: Adjust plugin behavior based on options
Plugin Configuration Example
When creating a plugin, you can define options like this:
import { createYooptaPlugin } from '@yoopta/editor';
const MyPlugin = createYooptaPlugin({
type: 'MyPlugin',
elements: {
// ... element definitions
},
options: {
display: {
title: 'My Custom Plugin',
description: 'A plugin for custom content',
icon: <CustomIcon />,
},
shortcuts: ['mod+shift+m'],
// Custom options
customSetting: true,
maxLength: 500,
},
});
function MyPluginComponent() {
const options = useYooptaPluginOptions<{
customSetting?: boolean;
maxLength?: number;
}>('MyPlugin');
const isEnabled = options?.customSetting ?? false;
const limit = options?.maxLength ?? 100;
// Use the options...
}
See Also