ESM component with callback

In this guide we will show you how to add callbacks to your ESM components.

Slideshow with Python callback

This example shows you how to create a Slideshow component that uses a Python callback function to update the Slideshow image when its clicked:

import param
import panel as pn

from panel.custom import JSComponent

pn.extension()

class Slideshow(JSComponent):

    index = param.Integer(default=0)

    _esm = """
    export function render({ model }) {
      const img = document.createElement('img')
      img.src = `https://picsum.photos/800/300?image=${model.index}`
      img.addEventListener('click', (event) => model.send_event('click', event))
      model.on('index', () => {
        img.src = `https://picsum.photos/800/300?image=${model.index}`
      })
      return img
    }
    """

    def _handle_click(self, event):
        self.index += 1

Slideshow(width=500, height=200).servable()

This approach lets you quickly build custom components with complex interactivity. However if you do not need any complex computations in Python you can also construct a pure JS equivalent:

Slideshow with Javascript Callback

This example shows you how to create a Slideshow component that uses a Javascript callback function to update the Slideshow image when its clicked:

import param
import panel as pn

from panel.custom import JSComponent

pn.extension()

class JSSlideshow(JSComponent):

    index = param.Integer(default=0)

    _esm = """
    export function render({ model }) {
      const img = document.createElement('img')
      img.src = `https://picsum.photos/800/300?image=${model.index}`
      img.addEventListener('click', (event) => { model.index += 1 })
      model.on('index', () => {
        img.src = `https://picsum.photos/800/300?image=${model.index}`
      })
      return img
    }
    """

JSSlideshow(width=800, height=300).servable()

By using Javascript callbacks instead of Python callbacks you can achieve higher performance, components that can be js linked and components that will also work when your app is saved to static html.