Streamlit Extras in Python

In this article we will introduce ourselves with the Streamlit-extras module, which can easily give some special touch to our Streamlit apps with the least amount of code possible.

What is streamlit-extras module?

Streamlit-extras is a special module that builds upon the traditional Streamlit module. It uses the abilities of the Streamlit module and adds some ‘extra’ features to it. It takes the help of some underlying HTML, CSS and JS, but developers just needs to write Python code to use all of it’s features. Some of it’s most usable features will be discussed here today.

Required Modules

We will be using two modules here, streamlit and streamlit-extras. To install both of them using pip write the following command in the terminal.

pip install streamlit

pip install streamlit-extras

Creating a simple Streamlit WebApp 

Firstly we are importing the module streamlit with alias stm, then giving a page title using the set_page_config() method of streamlit module, user can give any page title they want. The name will be visible in the Title Bar tab at the top. Then using title() method to give a title to text we will write afterwards. Then adding a simple text using text() method.

Output:

 

Adding vertical space in our WebApp

We will now add ‘n’ amount of vertical spaces in our web app using the add_vertical_space() function.

Here we are using the streamlit_extras module for the first time to import add_vertical_space class using alias avs which we are then using to call the add_vertical_space() function (The name of the class and the function is same, so we have to write them twice.) Passing a value of 5 means we want 5 vertical spaces. Writing a text before and after the space to show that how it looks and how much space it gave.

Output:

 

Adding annotated strings in our WebApp 

What are annotations?

An annotation is a note or comment that is added to a text to offer commentary or criticism on a specific passage. Annotation can also be used to describe the process of adding annotations. Scholarly articles or literary works that are being analysed frequently have annotations added.

Here we will use the annotated_text module which gets installed with streamlit-extras automatically so no need to install it again. Just import it and annotation function of the same module.

Then calling the annotated_text() method by passing it’s parameters. Now annotated text can both take a string or the function annotation() as it’s parameter.

• Normal text – If a normal text is passed inside annotated_text() then we need to pass all the possible styles we want to apply to that particular text, and that style will be applied to the entire text section we will write directly inside annotated_text().
• annotation() – Now if we want to provide a different annotation to certain parts of texts then we will pass them inside of annotation() function and put different styles as we want. This styles will be independent of the outside style we can provide and will not affect it.

Output:

 

Add buymeacoffee button in our WebApp

Mostly streamers or Youtube Content creators use this on their blog websites. We can also put buy my a coffee button using Streamlit-extras in very short code.

We are importing the buy_me_a_coffee function’s button method which is part of streamlit-extras module. Then we will just simply call the button method by passing 3 parameters –

• username – It is the parameter in which we can pass an URL of a certain website or blog to which the button will take us. We can also provide some username of people who are registered with buymeacoffee website, clicking this button will redirect us there.
• floating – It takes boolean values, either True or False. If It is True then this button will be at the bottom right, if not then just after the last element we added using Streamlit or anything.
• width – decides the width of the Button. Keep it above 200 otherwise the entire text of Buy me a Coffee will not be visible.

Output:

 

Add a clickable card in your WebApp

Clickable cards are a Hypermedia in which a URL or anything can be embedded and click that card will redirect the user to any website or anything. We can add that kind of card in our WebApp using streamlit-extras.

For that we will use streamlit_card module which is also gets downloaded with streamlit_extras module, so no need to install it separately,

Output :

 

Adding Filter to our DataFrame

This is one of the most useful feature of this module. This dataframe_explorer function let’s us add filters to the dataframes which we will add in our streamlit webApp.

Simply just pass the dataframe which we want to add in the Streamlit Webapp as the parameter of the dataframe_explorer() function. Then add the dataframe to our streamlit webapp using .dataframe() method. the parameter use_container_width is used to set the dataframe width to the parent container’s width if True. The width argument is substituted by this. Only a keyword can be used to support this argument.

Output:

 

Adding Keyboard bindings (Hitting a certain button on the Keyboard will do something) 

Hitting a certain key on the keyboard will redirect us to a website. We have to pass the key as parameter which the user need to press to get to a website. For this we will use two sub-modules of the streamlit-extras library, keyboard_url and keyboard_text. 

Here firstly we will import the keyboard_to_url and key functions from the keyboard_url and keyboard_text submodules of streamlit_extras library.

Output:

 

Add raining emojis in WebApp

We can rain certain emojis in our WebApp using this let_it_rain sub module of streamlit_extras.

We import the rain function of the let_it_rain class of streamlit_extras module and pass the required parameters.

If the user wants to rain a certain text they can also pass a text as the value of the emoji parameter of the rain function.

Output:

 

Add a list of To-Do items with Checkbox

Adding a To-Do list has become very easy with this function of streamlit-extras. For that we will use the stodo class of streamlit_extras module, from that we will import the to_do function and add the tasks using the write() method of streamlit.

Inside of to_do we are just normally using the write() method to pass the text we want to see, user may or may not add some emoji at the front to make it look better, or the shortcode for the emojis. Like in the last one :computer: is the shortcode for the Laptop emoji, after adding that in our streamlit webapp this will change to Laptop emoji..

Output: