@elementor/editor-panels
v0.10.2
Published
> [!WARNING] > This package is under development and not ready for production use.
Downloads
5,375
Keywords
Readme
Editor Panels
[!WARNING] This package is under development and not ready for production use.
Usage
Creating panel contains 3 steps:
- Creating the panel component
// components/my-panel.tsx
import { Panel, PanelHeader, PanelHeaderTitle, PanelBody } from '@elementor/editor-panels';
export default function MyPanel() {
return (
<Panel>
<PanelHeader>
<PanelHeaderTitle>{ /* Panel title */ }</PanelHeaderTitle>
</PanelHeader>
<PanelBody>
{ /* Here should be all the content of the panel */ }
</PanelBody>
</Panel>
);
}
- Creating an instance of the panel
// panel.ts
import { createPanel } from '@elementor/editor-panels';
import MyPanel from './components/my-panel';
export const {
panel,
usePanelStatus,
usePanelActions,
} = createPanel( {
id: 'my-panel',
component: MyPanel
} );
- Registering the panel
// init.ts
import { registerPanel } from '@elementor/editor-panels';
import { panel } from './panel';
function init() {
registerPanel( panel );
}
// index.ts
import init from './init';
init();
Using panel actions and state
To change or read the state of a panel (open/close), you can use 2 hooks that are being returned
from the createPanel()
function.
Let's assume that we have a button that should open the panel when clicked, and close it when clicked again.
// components/my-panel-button.tsx
import { usePanelStatus, usePanelActions } from '../panel';
export default function MyPanelButton() {
const { isOpen, isBlocked } = usePanelStatus();
const { open, close } = usePanelActions();
return (
<button onClick={ isOpen ? close : open } disabled={ isBlocked }>
{ isOpen ? 'Close panel' : 'Open panel' }
</button>
);
}