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

[vinzee]

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?

[akshanshkmr]

Hey,

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

Thanks,
Akshansh

[vinzee]

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.

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.

Not sure if it will stay my final solution.