import React , { useEffect , useState } from "react" ; import { ComponentProps , Streamlit , withStreamlitConnection } from "streamlit-component-lib" ; import { TagsInput } from "./react-tag-input-componet" ; import "./styles.css" ; interface PythonArgs { label : string ; text : string ; initialValue : string [ ] ; suggestions : string [ ] ; maxTags : number ; } const Custom_keywords = ( props ) => { let { label , text , initialValue , suggestions , maxTags } = props . args ; const [ value , setValue ] = useState ( initialValue ) ; const onSubmit = ( values ) => { setValue ( values ) ; Streamlit . setComponentValue ( ( values ) ) ; } ; useEffect ( ( ) => Streamlit . setFrameHeight ( ) ) ; return ( < div > < TagsInput value = { value } onChange = { ( value ) => onSubmit ( value ) } name = { label } placeHolder = { text } suggestions = { suggestions } maxTags = { maxTags } / > < /div>); } ; export default withStreamlitConnection ( Custom_keywords ) ;