Code snippet: create Components without any frontend tooling (no React, Babel, Webpack, etc)

Show the Community!
21

Hi @thiago, Thanks for this code snippet
I just need the screen width and height to use in my application. This functionality seems to be helping my case.
I changed the code piece in index.html.

  // data is any JSON-serializable value you sent from Python,
  // and it's already deserialized for you.
  function onDataFromPython(event) {
    var width = window.screen.width
    var space = " "
    var height = window.screen.height
    if (event.data.type !== "streamlit:render") return;
    // myInput.value = event.data.args.my_input_value;  // Access values sent from Python here!
    myInput.value = [width, height]
  }

image
and I am getting this output. I dont want the message to be displayed in text input rather need width and height as a variable in backend python. the value is always None. What should I do for my request. Please guide

1 Like
22

@Murugan_Yuvaraaj_M_P Are you calling sendDataToPython in your script anywhere? That’s what you’ll need to call in order to send the data back to your python script.

If you’re interested, I created a cookiecutter template for creating a component that uses a slightly modified version of Thiago’s snippet and wrote a blog post showing how to use it How to build your own Streamlit component

1 Like
23

Thanks for the example. However whenever i add a
<script src='some_external.js' />
I get the following error:

The app is attempting to load the component from ****, and hasn't received its "streamlit:componentReady" message

Would appreciate any help in this. I am including an external js and do not want to paste it verbatim in <script>

24

In addition to @thiago’s and @blackary’s articles I wrote one which starts from the very basics and progresses towards a full blown React / Next.js component design. You can read up to the end of section “Component Zero”.

3 Likes
25

@thiago how can I add a simple React component into mycomponent/index.html ? do you have an example? Thanks in advance

UPDATE: please ignore my message, i was able to do it. Thanks again :pray:

26

hey @thiago, this is really cool, thanks a lot for sharing.
I am trying to have a clickable list of items so wanted to slightly alter your example with the click event and it looks like it somehow triggers twice so the variable is reset. Any idea how to prevent that?
The same is happening to the click detector lib, and it looks like more people have experienced this. Duplication when clicking · Issue #9 · vivien000/st-click-detector · GitHub
this is all i added to your code, and its still working fine with the change event.

       <div id="justadiv">hohoho</div>
        var justadiv = document.getElementById("justadiv");

      justadiv.addEventListener("click", function() {
        sendDataToPython({
          value: myInput.value,
          dataType: "json",
        });
      })
27

ok, my example is wrong, i had 2 eventlisteners. the issue with double load is when I click on a table generated by pandas - so i guess there are some more events in play.

with plain html everything works fine, thanks :slight_smile:

28

@thiago or anyone could you give me a hand with my challenge?

29

@thiago
Thanks you so much for made this code snipset.
I’m trying to custom my own html component to paste image from clipboard to streamlit, I dont know how to modify js functions in your index.html component to get data from clipboard. Can you give me an advice for it ? Thank you.