Toggle switch (WIP)

Custom Components
1

Hi everyone.

I’ve decided to learn the ropes by building a toggle switch component (baby steps!).

To save littering the forum with my various (beginner) questions, I plan to document any roadblocks I come across in this thread.

First stumbling block: installing baseui. I ran npm add baseui in the frontend directory, as recommended by the docs.

I then import it n MyComponent.tsx as follows:

import {Checkbox} from 'baseui/checkbox'

and get this…

TypeScript error in frontend/node_modules/baseui/overrides.ts(2,27):
Cannot find module 'styletron-react'.  TS2307

I tried running npm add styletron-react but that gave me an error about a missing declaration file.

Probably a newbie package management error on my side, just thought it was worth asking for advice here before disappearing down the npm rabbit hole…

2

Hey @sjd333 great to see you try to create a component !

Actually, about baseui + Typescript, to use it there’s a bit more packages to install.

npm install baseui styletron-engine-atomic styletron-react
npm install @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic

Then to activate the default light theme, you can wrap your component with the light theme, inside your index.tsx file for example so your component renders correctly :

import React from "react"
import ReactDOM from "react-dom"
import CustomSlider from "./CustomSlider"

// Lots of import to define a Styletron engine and load the light theme of baseui
import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import {ThemeProvider, LightTheme} from 'baseui';

const engine = new Styletron();

// Wrap your CustomCheckbox with the baseui them
ReactDOM.render(
  <React.StrictMode>
    <StyletronProvider value={engine}>
      <ThemeProvider theme={LightTheme}>
        <CustomCheckbox/>
      </ThemeProvider>
    </StyletronProvider>
  </React.StrictMode>,
  document.getElementById("root")
)

:slight_smile: Keep us updated on your progress !

Fanilo

3

Brilliant, many thanks @andfanilo - appreciate the super quick reply, will give this a try.

I will be sure to keep you all updated on my progress. :slight_smile:

4

OK, so I’m definitely making progress.

  • The custom component shows up
  • The user can interact with it
  • The label is passed through to the React component successfully

However, the communication between the React Component and Python component is not yet fully working:

  • The component always returns a value of True
  • Passing value=False does not result in the switch defaulting to off.

I’ll take another look with fresh eyes later on (any pointers, of course, most welcome!).

5

This looks amazing! :fire:

6

Hi, thanks for your experiment. It looks very cool. I’m not sure it’s still relevant to you, however rewriting onChange as follows seems like it’s doing the trick (at least, in my case) :slight_smile:

private onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const isChecked = e.currentTarget.checked
    this.setState({ value: isChecked }, () => {
      Streamlit.setComponentValue(isChecked)
    })
7

Great component SJD! :raised_hands:

However, I can’t seem to display the toggle in my app.

I pasted all the files from your github and I’ve added the code below:

import streamlit as st
from streamlit_toggle import st_toggleswitch
awesomeness_enabled = st_toggleswitch("Enable awesomeness",  key = 1 )
if awesomeness_enabled:
    st.write("Awesomeness has been enabled!")

Am I forgeetting anything?

Thanks,
Charly

8

Hi @sjd333 , I’ve got the following message. Am I missing anything to run the widget? Thanks.

image
image767×343 17.6 KB