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.

screenshot

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

Installation

pip install st-click-detector

Usage

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='https://images.unsplash.com/photo-1565130838609-c3a86655db61?w=200'></a>
    <a href='#' id='Image 2'><img width='20%' src='https://images.unsplash.com/photo-1565372195458-9de0b320ef04?w=200'></a>
    """
clicked = click_detector(content)

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

Nice!

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!

1 Like