Is it possible to import Shared Components when creating a Streamlit Component?

Custom Components
1

Is it possible to use a Shared Components when creating a Streamlit Component?

My use case if the following: I would like to create an “info alert” (st.sidebar.info("some text")) with a little tweak. The little tweak consists in adding a little icon to “copy” the text of the info alert when clicked.

Instead of recreating the JS and CSS from scratch, I wanted to import the shared component AlertContainer inside my MyComponent.tsx file and start from there.

But I failed to do so. It looks like the said Container is not in the streamlit-component-lib module.
Is there a way to do what I just described?

2

Hey,

Can you just use st.sidebar.code(“Some text”)
To achieve the same?

Thanks,
Akshansh

3

Good idea, I did not think of that! I tried it: the text is too long for the sidebar and a scroll bar appears and it’s cluttering the small space. It would have been great if there was an option for the text to appear on several lines like the st.sidebar.info.

image

I finally managed to do it using “\n” chars that are not copied to clipboard when pasting inside a browser but are copied when copying to a text file for example.

image

Not sure if it will stay my final solution. :slight_smile:

4

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