10.2.1 Making a ReactJS Component

Initially, Node and npm needs to be installed from NodeJS.org. Then, we will use Streamlit’s official template for making custom components from GitHub. In this subsection, we will quickly cover making a ReactJS component.

In this example we will produce a rating stars widget as shown in Figure 10-2 in ReactJS and build upon it in the following subsections. The developer community of ReactJS is considerably larger than that of other frameworks, making it worthwhile to invest time in creating such components. .

10.2.2 Using a ReactJS Component in Streamlit

The previous code snippet uses a live component running locally on port 3001, which in our case needs to be the ReactJS app. Then it exposes a function to be used by any other Python source to be run as a Streamlit module. Executing Listing 10-5 with Streamlit's CLI tool, will result in what is shown in Figure 10-3.

import streamlit as st

from rating_stars import rating_stars

st.title("Rating stars demo!")

rating_stars()

Listing 10-5

Initial version of main.py

Now a new folder called build will appear in the frontend folder, containing the necessary JavaScript, CSS, and HTML files to be used by Streamlit to load it into an application. Once that is done and it is fixed to run the built version of a component, we need to change the IS_RELEASE to True, forcing Streamlit to load the new custom component from the frontend/build/ folder. And that is exactly what is being conveyed by Figure 10-1.

10.2.3 Sending Data to the Custom Component

At this point, we can just display ReactJS applications in a Streamlit context, albeit without a communication mechanism between the front and back ends. Now, we will showcase how to send data from Streamlit to ReactJS, when the transferable data is dynamic, giving us the capability of sending information from Streamlit with every rerender to the ReactJS application.

Bringing this new update to action, we will make the Streamlit application as shown in Listing 10-8 to showcase native and custom components side by side. Figure 10-4 shows the homogeneity between our newly made configurable component and out-of-the-box components by Streamlit.

import streamlit as st

from rating_stars import rating_stars

st.title("Rating stars demo!")

total_stars = st.slider(label="Total Stars", min_value=0, max_value=20, value=10, step=1) selected_stars = st.slider(label="Selected Stars", min_value=0, max_value=total_stars, step=1) rating_stars(total_stars, selected_stars)

Listing 10-8

Second version of main.py

10.2.4 Receiving Data from the Custom Component

After playing around with the sliders to set our custom rating component, we can notice how our Streamlit application’s view is bloated with extra widgets that are used to set another view’s behavior, when we already could have set the number of selected stars by hovering the mouse to and clicking any star. However, this will require the Streamlit application to know what value is selected, and here comes a way to get data from custom components in Streamlit.

Now in our main Streamlit file, we remove the slider for the selected star count and then replace it with the output of the custom component. And finally, we display on our application the number of stars selected, as shown in Listing 10-11, with the output shown in Figure 10-5.

import streamlit as st

from rating_stars import rating_stars

st.title("Rating stars demo!")

total_stars = st.slider(label="Total Stars", min_value=0, max_value=20, value=10, step=1) selected_stars = rating_stars(total_stars)

st.write(str(selected_stars) + " star(s) have been selected")

Listing 10-11

main.py, Streamlit file to be run

10.4.1 Stepper Bar

This is inspired by Material UI’s Stepper. As mentioned before, ReactJS’s developer community withholds various useful components that can be imported into the Streamlit world without a big hassle. And this stepper bar can actually be useful in the context of most Streamlit application, as it allows moving through sequential steps in a specific order to do something which is mostly data science related. It is a simple component as it returns the index of the stage the user has arrived to, as seen in Figures 10-7, 10-8, and 10-9. You, as a developer, are not bound to only three phases; rather, you can supply a list of all tab names, and the return value will be the selected list item index as might be shown in Listing 10-15. Numbering and animations are already taken care of.

10.4.2 Bouncing Image

This component offers zooming animations for an image with a bouncing effect. It can be used in loading moments or splash screen. This might not be a frequently used component, but when it does, the animation duration, control switch, and dimensions are needed for it to work based on different requirements as seen in Listing 10-16. The ReactJS aspect of it is a little more complex than thePythonic aspect, as it needs to manage animation cycles and return back the status which requires setting state and reporting widget state back to Streamlit every cycle. Even though JavaScript is not the main focus of this book, Listing 10-17 is relatively simple to understand. However, the final result shall look something like Figure 10-10.

import os

import streamlit.components.v1 as components

from extra_streamlit_components import IS_RELEASE

if IS_RELEASE:

   absolute_path = os.path.dirname(os.path.abspath(__file__))

   build_path = os.path.join(absolute_path, "frontend/build")

   _component_func = components.declare_component("bouncing_image", path=build_path)

else:

   _component_func = components.declare_component("bouncing_image", url="http://localhost:3001")

def bouncing_image(image_source: str, animate: bool, animation_time: int, height: float, width: float):

   _component_func(image=image_source, animate=animate, animation_time=animation_time, height=height, width=width)

Listing 10-16

BouncingImage/__init__.py

import {

   Streamlit,

   StreamlitComponentBase,

   withStreamlitConnection,

}  from "streamlit-component-lib"

import React from "react"

import { withStyles, createStyles } from "@material-ui/core/styles"

import Grow from "@material-ui/core/Grow"

import CardMedia from "@material-ui/core/CardMedia"

const styles = createStyles((theme) => ({

   root: {

     height: 180,

   },

   container: {

     display: "flex",

   },

   paper: {

     margin: 1,

   },

   svg: {

     width: 100,

     height: 100,

   },

   polygon: {

     fill: "white",

     stroke: "red",

     strokeWidth: 1,

   },

}))

class BouncingImage extends StreamlitComponentBase {

   state = {

     animationTimeRoundTrip: 1750,

     isAnimating: true,

     keepAnimating: false,

   }

   constructor(props) {

     super(props)

   }

   componentDidMount() {

     const { animation_time, animate } = this.props.args

     Streamlit.setComponentValue(animate)

     this.setState(

       () => ({

         animationTimeRoundTrip: animation_time,

         keepAnimating: animate,

       }),

       () =>

         setInterval(

           () =>

             this.state.keepAnimating &&

             this.setState(

               () => ({

                 isAnimating:

                   !this.state.isAnimating && this.state.keepAnimating,

               }),

               () => Streamlit.setComponentValue(this.state.keepAnimating)

             ),

           this.state.animationTimeRoundTrip / 2

          )

      )

   }

   render = () => {

     const isAnimating = this.state.isAnimating

     let {

       classes,

       args: { image, height, width },

     } = this.props

     return (

       <div className={classes.root}>

         <div className={classes.container}>

           <Grow

             in={isAnimating}

             style={{ transformOrigin: "0 0 0" }}

             {...(isAnimating

               ? { timeout: this.state.animationTimeRoundTrip / 2 }

               : {})}

           >

             <CardMedia image={image} style={{ height, width }} />

          </Grow>

        </div>

       </div>

      )

     }

   }

export default withStreamlitConnection(withStyles(styles)(BouncingImage))

Listing 10-17

BouncingImage/frontend/src/BouncingImage.jsx

10.4.3 Tab Bar

Instead of making a Streamlit column widget to host multiple buttons which will act as a tab bar, you can just use this custom component. It provides a way to encapsulate the title, description, and ID of each button in a UI-organized way as it provides a horizontal scroll view if the tabs – side-to-side length – exceeded the window’s width.

Figures 10-11 and 10-12 show the behavior of the tab button once it is clicked and the output of the component in Streamlit. Creating those tabs requires passing a list of specific Python objects as shown in Listing 10-19 which will then be parsed to JSON and be processed by the TypeScript ReactJS component in Listing 10-18.

import {

   Streamlit,

   StreamlitComponentBase,

   withStreamlitConnection,

}  from "streamlit-component-lib"

import React, { ComponentProps, ReactNode } from "react"

import ScrollMenu from "react-horizontal-scrolling-menu"

interface State {

   numClicks: number

   selectedId: number

}

interface MenuItem {

   id: number

   title: string

   description: string

}

class TabBar extends StreamlitComponentBase<State> {

public state = { numClicks: 0, selectedId: 1, list: [] }

  constructor(props: ComponentProps<any>) {

    super(props)

    this.state.list = this.props.args["data"]

    this.state.selectedId = this.props.args["selectedId"]

  }

   MenuItem = ({ item, selectedId }: { item: MenuItem; selectedId: number }) => {

     return (

       <div className={'menu-item ${selectedId == item.id ? "active" : ""}'}>

         <div>{item.title}</div>

         <div style={{ fontWeight: "normal", fontStyle: "italic" }}>

            {item.description}

         </div>

       </div>

     )

   }

   Menu(list: Array<MenuItem>, selectedId: number) {

     return list.map((item) => (

       <this.MenuItem item={item} selectedId={selectedId} key={item.id} />

     ))

   }

   Arrow = ({ text, className }: { text: string; className: string }) => {

     return <div className={className}>{text}</div>

   }

   ArrowLeft = this.Arrow({ text: "<", className: "arrow-prev" })

   ArrowRight = this.Arrow({ text: ">", className: "arrow-next" })

   public render = (): ReactNode => {

     return (

       <div>

         <ScrollMenu

            alignCenter={false}

            data={this.Menu(this.state.list, this.state.selectedId)}

            wheel={true}

            scrollToSelected={true}

            selected={'${this.state.selectedId}'}

            onSelect={this.onSelect}

         />

         <hr

            style={{

              borderColor: "var(--streamlit-primary-color)",

            }}

         />

       </div>

     )

   }

   onSelect = (id: any) => {

     this.setState(

       (state, props) => {

         return { selectedId: id }

       },

       () => Streamlit.setComponentValue(id)

     )

   }

}

export default withStreamlitConnection(TabBar)

Listing 10-18

TabBar/frontend/src/TabBar.tsx

import os

import streamlit.components.v1 as components

from dataclasses import dataclass

from typing import List

from extra_streamlit_components import IS_RELEASE

if IS_RELEASE:

   absolute_path = os.path.dirname(os.path.abspath(__file__))

   build_path = os.path.join(absolute_path, "frontend/build")

   _component_func = components.declare_component("tab_bar", path=build_path)

else:

   _component_func = components.declare_component("tab_bar", url="http://localhost:3001")

@dataclass(frozen=True, order=True, unsafe_hash=True)

class TabBarItemData:

   id: int

   title: str

   description: str

   def to_dict(self):

       return {"id": self.id, "title": self.title, "description": self.description}

def tab_bar(data: List[TabBarItemData], default=None, return_type=str, key=None):

   data = list(map(lambda item: item.to_dict(), data))

   component_value = _component_func(data=data, selectedId=default, key=key, default=default)

   try:

       if return_type == str:

           return str(component_value)

       elif return_type == int:

           return int(component_value)

       elif return_type == float:

           return float(component_value)

       except:

           return component_value

Listing 10-19

TabBar/__init__.py

10.4.4 Cookie Manager

This has been introduced before in the previous chapter; however, it was treated as a black box which can just save data we think of on the client browser side. The Cookie Manager is not only a custom component but also a Python service, as it relies on data managing in a Pythonic context with CRUD operations on a ReactJS-based component. If you are a web developer, you might already know that setting cookies is not a big deal, as you are writing code to be executed on the client side. Fortunately, in Streamlit we can write both server-side and client-side code in the same script. Knowing that we can make React custom component which will then be executed on the browser, we can set it up to control cookies on the client’s end, as shown in Figure 10-13.

Leveraging the knowledge from the material introduced in this chapter, we can set up a bidirectional communication between Streamlit’s server end and the custom ReactJS component running on the client’s browser. By doing so, we can command our component to gather, delete, or add cookies on the browser and even listen to the return value, if any. Starting with the ReactJS side in Listing 10-20, we first read the expected arguments such as the operation needed and then the data to act on, then based on what is asked we take actions against the cookies using the npm’s package universal-cookie, and finally we send back a response about the status of the operation.

On Python’s end, Listing 10-21 just encapsulates the whole communication method with the browser’s component. Also, it stores all the cookies in memory for that user once initialized, in order to save more network traffic time. However, if the class’s constructor is not cached once first initialized, it will have no added value as it will be executed every time Streamlit reruns. That is why it is advised to use the snippet in Listing 10-22 when using the Cookie Manager. Figure 10-14 shows a demo of this custom component.

import {

  Streamlit,

  ComponentProps,

  withStreamlitConnection,

} from "streamlit-component-lib"

import React, { useEffect, useState } from "react"

import Cookies from "universal-cookie"

let last_output = null

const cookies = new Cookies()

const CookieManager = (props: ComponentProps) => {

  const setCookie = (cookie, value, expires_at) => {

    cookies.set(cookie, value, {

      path: "/",

      samesite: "strict",

      expires: new Date(expires_at),

    })

    return true

  }

  const getCookie = (cookie) => {

    const value = cookies.get(cookie)

    return value

  }

  const deleteCookie = (cookie) => {

    cookies.remove(cookie, { path: "/", samesite: "strict" })

    return true

  }

  const getAllCookies = () => {

    return cookies.getAll()

  }

  const { args } = props

  const method = args["method"]

  const cookie = args["cookie"]

  const value = args["value"]

  const expires_at = args["expires_at"]

  let output = null

  switch (method) {

    case "set":

      output = setCookie(cookie, value, expires_at)

      break

    case "get":

      output = getCookie(cookie)

      break

    case "getAll":

      output = getAllCookies()

      break

    case "delete":

      output = deleteCookie(cookie)

      break

    default:

      break

  }

  if (output && JSON.stringify(last_output) != JSON.stringify(output)) {

    last_output = output

    Streamlit.setComponentValue(output)

    Streamlit.setComponentReady()

  }

  useEffect(() => Streamlit.setFrameHeight())

     return <div></div>

}

export default withStreamlitConnection(CookieManager)

Listing 10-20

CookieManager/frontend/src/CookieManager.tsx

import os

import streamlit.components.v1 as components

import datetime

from extra_streamlit_components import IS_RELEASE

if IS_RELEASE:

   absolute_path = os.path.dirname(os.path.abspath(__file__))

   build_path = os.path.join(absolute_path, "frontend/build")

   _component_func = components.declare_component("cookie_manager", path=build_path)

else:

   _component_func = components.declare_component("cookie_manager",

      url="http://localhost:3001")

class CookieManager:

   def __init__(self, key="init"):

      self.cookie_manager = _component_func

      self.cookies = self.cookie_manager(method="getAll", key=key, default={})

   def get(self, cookie: str):

      return self.cookies.get(cookie)

   def set(self, cookie, val,

      expires_at=datetime.datetime.now() + datetime.timedelta(days=1), key="set"):

      if cookie is None or cookie == "":

          return

      expires_at = expires_at.isoformat()

      did_add = self.cookie_manager(method="set", cookie=cookie, value=val, expires_at=expires_at, key=key, default=False)

      if did_add:

         self.cookies[cookie] = val

   def delete(self, cookie, key="delete"):

      if cookie is None or cookie == "":

          return

      did_add = self.cookie_manager(method="delete", cookie=cookie, key=key, default=False)

      if did_add:

         del self.cookies[cookie]

   def get_all(self, key="get_all"):

     self.cookies = self.cookie_manager(method="getAll", key=key, default={})

     return self.cookies

Listing 10-21

CookieManager/__init__.py

@st.cache(allow_output_mutation=True)

def get_manager():

    return stx.CookieManager()

cookie_manager = get_manager()

Listing 10-22

How to initialize and use Cookie Manager

10.4.5 Router

In almost any web application, different URLs exist. This helps in providing two main benefits, modularization of content’s code to the developer and an easy access for the user to specific pages. This STX component is different than its counterparts, as it doesn’t make a ReactJS application, rather uses Python and Streamlit tools to make use of query parameters for routing.

Trying the demo out with multiple routes, we can notice that it acts as expected where the routes having the nav parameter set to either /landing or /home show the equivalent page content as seen in Figures 10-16 and 10-17, respectively. We can also see the root route returns nothing in Figure 10-15, and the same behavior occurs in Figure 10-18. This module can be further enhanced by adding a not found route, which is something like the infamous 404 page seen quite often on the Internet.