Plugin render

[sly niche]

Hello guys, i' developing multiple plugins for puck and I have a question, Is it possible to render a plugin only when it is selected on the rail? Almost all of my plugin react to selected component, so they will rerender even if they are not visible
Thanks!

[ripe prairie]

Hey hey!

You can use this to see if it's currently selected:
⁨⁨```
const usePuck = createUsePuck();

const isOpened = usePuck(s => s.appState.ui.plugin.current === "my-plugin-name");

[random glade]

Hey @sly niche! Exactly as @ripe prairie mentions, you can use that and returning early from the render function if you need to.

[sly niche]

Yes but this does not answer my question, if I have an useEffect with selected component as dependencies will always fire when a component is selected, even if the plugin is not visible. Is there a way to enable the plugin only when visible?

[ripe prairie]

This does answer your question. Here a small example:

⁨⁨⁨⁨```
const usePuck = createUsePuck();

const MyPlugin = () => {
useEffect(() => {
console.log("rendered")
}, []);

return <div>...</div>
}

const PluginComponent = () => {
const isOpened = usePuck(s => s.appState.ui.plugin.current === "my-plugin-name");

if (!isOpened) {
return null;
}

return <MyPlugin />
}

will only fire if your plugin is active. Hope that helps!