New component: HTML content with click detection

st-click-detector is a very simple new component that you might find useful in many situations. It displays some HTML content, detects when a link is clicked and returns the id of the clicked link. It’s a generalization of st-clickable-images.


This component can for example be used for:

  • allowing users to interact with list of text results (example)
  • showing a gallery with clickable images (example)
  • displaying buttons with a fancy layout


pip install st-click-detector


The code for the example above is:

import streamlit as st
from st_click_detector import click_detector

content = """<p><a href='#' id='Link 1'>First link</a></p>
    <p><a href='#' id='Link 2'>Second link</a></p>
    <a href='#' id='Image 1'><img width='20%' src=''></a>
    <a href='#' id='Image 2'><img width='20%' src=''></a>
clicked = click_detector(content)

st.markdown(f"**{clicked} clicked**" if clicked != "" else "**No click**")


Feel free to add this to the Streamlit Components - Community Tracker - Show the Community! - Streamlit so we don’t lose track of it :slight_smile:

Have a nice day,
Fanilo :balloon:

1 Like

Thanks. Done!


This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.