https://github.com/farah-s/streamlit_custom_input

Customizable streamlit component for text input
https://github.com/farah-s/streamlit_custom_input

reactjs streamlit-component streamlit-components

Last synced: 2 months ago
JSON representation

Customizable streamlit component for text input

• Host: GitHub
• URL: https://github.com/farah-s/streamlit_custom_input
• Owner: Farah-S
• License: mit
• Created: 2023-12-07T16:04:49.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-02T23:38:09.000Z (over 2 years ago)
• Last Synced: 2025-06-09T18:04:18.282Z (about 1 year ago)
• Topics: reactjs, streamlit-component, streamlit-components
• Language: TypeScript
• Homepage:
• Size: 7.38 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# streamlit_custom_input

![input_example](https://github.com/Farah-S/streamlit_custom_input/blob/main/streamlit_custom_input/frontend/public/input_example.png)

Streamlit custom chat input box, it returns the value entered by the user on enter or by clicking on the button. To add a new line the user can press shift+enter. The parameters are as follow:

Args:

    initialValue (string, optional): 

        The initial value that will be displayed in the input box

    

    key (string, optional): 

        Uniquely identifies the input instance. Defaults to "ChatInput".

    

    inputStyle (dict, optional): 

        Allows the customization of the input box style with CSS. 

        The values that can be changed and their default values are 

        {

            paddingLeft: "10px", 

            paddingRight: "10px",

            whiteSpace: "pre-line", 

            resize: "none", 

            marginLeft: "0", 

            marginRight: "10px",

            paddingBottom: "3px", 

            width: "75%", 

            borderRadius: "1rem", 

            maxBlockSize: "75px", 

            borderColor: "#f4efff", 

            backgroundColor: "#fcf9ff"

        }.

        

    buttonStyle (dict, optional): 

        Allows the customization of the input button style with CSS. 

        The values that can be changed and their default values are 

        {    

            width: "55px", 

            borderRadius: "3rem", 

            paddingRight: "5px", 

            paddingTop: "3px", 

            paddingLeft: "9px", 

            display: "flex", 

            justifyContent: "center", 

            backgroundColor: "#edf1ff", 

            color: "#5b5b5c",

            height: "33px"

        }.

Returns:

    string

## Installation instructions

```sh

python -m pip install --index-url https://test.pypi.org/simple/ --no-deps streamlit_custom_input

```

## Usage instructions

Example of how to use without customization

```python

import streamlit as st

from streamlit_custom_input import ChatInput

value = ChatInput(initialValue="", key="input")

```

Example of how to use with customization

```python

import streamlit as st

from streamlit_custom_input import ChatInput

value = ChatInput(initialValue="", key="input", inputStyle={"backgroundColor":"black"}, buttonStyle={"height":"50px"})

```

For more example please check the app.py