├── .DS_Store
├── .gitignore
├── LICENSE
├── MANIFEST.in
├── README.md
├── setup.py
└── streamlit_scrollable_textbox
    ├── .DS_Store
    ├── __init__.py
    └── frontend
        ├── .DS_Store
        ├── .env
        ├── .prettierrc
        ├── .prettierrc 2
        ├── package-lock.json
        ├── package.json
        ├── public
            ├── bootstrap.min.css
            └── index.html
        ├── src
            ├── .DS_Store
            ├── index.tsx
            ├── react-app-env.d.ts
            └── streamlit_scrollable_textbox.tsx
        └── tsconfig.json


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobertoFN/streamlit-scrollable-textbox/10ffbab35b27f1533fb471a25d7abb117709685a/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | build/
2 | .venv/
3 | dist/
4 | streamlit_scrollable_textbox.egg-info/
5 | streamlit_scrollable_textbox/frontend/build/
6 | streamlit_scrollable_textbox/frontend/node_modules/
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2018-2021 Streamlit Inc.
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/MANIFEST.in:
--------------------------------------------------------------------------------
1 | recursive-include streamlit_scrollable_textbox/frontend/build *
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h2> Streamlit Scrollable Textbox </h2>
 2 | 
 3 | This repository contains a custom Streamlit component, that allows users to create scrollable textboxes of a defined height, to display long pieces of text on a Streamlit app while maintaining a desired layout.
 4 | 
 5 | <br>
 6 | To install the component, run the following command:
 7 | 
 8 |       pip install streamlit-scrollable-textbox
 9 | 
10 | <br>
11 | Importing and using the package in your Python project can be done as so:
12 | 
13 |       import streamlit_scrollable_textbox as stx
14 | 
15 |       stx.scrollableTextbox('My very long text.')
16 | 
17 | <br>
18 | The parameters of the scrollableTextbox function are:
19 | 
20 | - text (str): The text to be displayed. Line breaks and new lines can be added by including "\n" in the string. 
21 | - height (int): The height of the scrollable area, in pixels. Default value is 100 px.
22 | - font family (str): The font family of the text to be displayed. Only fonts supported by browsers can be used.
23 | - border (bool): Define whether the scrollable area should have a border or not.
24 | 
25 | <br><br>
26 | <img src="https://user-images.githubusercontent.com/108201791/198837373-45be2528-01b3-484d-b91d-2c1111515593.gif" style="width:50em">
27 | 


--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
 1 | import setuptools
 2 | 
 3 | from pathlib import Path
 4 | this_directory = Path(__file__).parent
 5 | long_description = (this_directory / "README.md").read_text()
 6 | 
 7 | setuptools.setup(
 8 |     name="streamlit_scrollable_textbox",
 9 |     version="0.0.3",
10 |     author="Roberto Frias Nerio",
11 |     author_email="robertofnerio@gmail.com",
12 |     description="Scrollable textbox for Streamlit.",
13 |     long_description=long_description,
14 |     long_description_content_type="text/markdown",
15 |     url="https://github.com/RobertoFN/streamlit-scrollable-textbox",
16 |     packages=setuptools.find_packages(),
17 |     include_package_data=True,
18 |     classifiers=[],
19 |     python_requires=">=3.6",
20 |     install_requires=[
21 |         # By definition, a Custom Component depends on Streamlit.
22 |         # If your component has other Python dependencies, list
23 |         # them here.
24 |         "streamlit >= 0.63",
25 |     ],
26 | )
27 | 


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobertoFN/streamlit-scrollable-textbox/10ffbab35b27f1533fb471a25d7abb117709685a/streamlit_scrollable_textbox/.DS_Store


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/__init__.py:
--------------------------------------------------------------------------------
 1 | from distutils.command.build import build
 2 | import os
 3 | import streamlit.components.v1 as components
 4 | import streamlit as st
 5 | 
 6 | _RELEASE = True
 7 | 
 8 | if _RELEASE:
 9 |     root_dir = os.path.dirname(os.path.abspath(__file__))
10 |     build_dir = os.path.join(root_dir, 'frontend/build')
11 | 
12 |     _scrollable_textbox = components.declare_component(
13 |         "scrollableTextbox",
14 |         path=build_dir
15 |     )
16 | else:
17 |     _scrollable_textbox = components.declare_component(
18 |         "scrollableTextbox",
19 |         url="http://localhost:3001"
20 |     )
21 | 
22 | 
23 | def scrollableTextbox(text:str, height:int=100, fontFamily:str='Helvetica', border:bool=True, key=None):
24 |     return _scrollable_textbox(text=text, height=height, fontFamily=fontFamily, border=border, key=key, default=None)
25 | 
26 | if not _RELEASE:
27 |     scrollableTextbox('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', fontFamily='Arial', key='1')
28 | 
29 | 


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobertoFN/streamlit-scrollable-textbox/10ffbab35b27f1533fb471a25d7abb117709685a/streamlit_scrollable_textbox/frontend/.DS_Store


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/.env:
--------------------------------------------------------------------------------
1 | # Run the component's dev server on :3001
2 | # (The Streamlit dev server already runs on :3000)
3 | PORT=3001
4 | 
5 | # Don't automatically open the web browser on `npm run start`.
6 | BROWSER=none
7 | 


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": false,
4 |   "trailingComma": "es5"
5 | }
6 | 


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/.prettierrc 2:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": false,
4 |   "trailingComma": "es5"
5 | }
6 | 


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "streamlit_scrollable_textbox",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@types/jest": "^24.0.0",
 7 |     "@types/node": "^12.0.0",
 8 |     "@types/react": "^16.9.0",
 9 |     "@types/react-dom": "^16.9.0",
10 |     "react": "^16.13.1",
11 |     "react-dom": "^16.13.1",
12 |     "react-scripts": "3.4.1",
13 |     "streamlit-component-lib": "^1.3.0",
14 |     "typescript": "~3.8.0"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start",
18 |     "build": "react-scripts build",
19 |     "test": "react-scripts test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": "react-app"
24 |   },
25 |   "browserslist": {
26 |     "production": [">0.2%", "not dead", "not op_mini all"],
27 |     "development": [
28 |       "last 1 chrome version",
29 |       "last 1 firefox version",
30 |       "last 1 safari version"
31 |     ]
32 |   },
33 |   "homepage": "."
34 | }
35 | 


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Streamlit Component</title>
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta name="description" content="Streamlit Component" />
 9 |     <link rel="stylesheet" href="bootstrap.min.css" />
10 |   </head>
11 |   <body>
12 |     <noscript>You need to enable JavaScript to run this app.</noscript>
13 |     <div id="root"></div>
14 |     <!--
15 |       This HTML file is a template.
16 |       If you open it directly in the browser, you will see an empty page.
17 | 
18 |       You can add webfonts, meta tags, or analytics to this file.
19 |       The build step will place the bundled scripts into the <body> tag.
20 | 
21 |       To begin the development, run `npm start` or `yarn start`.
22 |       To create a production bundle, use `npm run build` or `yarn build`.
23 |     -->
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobertoFN/streamlit-scrollable-textbox/10ffbab35b27f1533fb471a25d7abb117709685a/streamlit_scrollable_textbox/frontend/src/.DS_Store


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import ReactDOM from "react-dom"
 3 | import ScrollableText from "./streamlit_scrollable_textbox"
 4 | 
 5 | ReactDOM.render(
 6 |   <React.StrictMode>
 7 |     <ScrollableText />
 8 |   </React.StrictMode>,
 9 |   document.getElementById("root")
10 | )
11 | 


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/src/streamlit_scrollable_textbox.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Streamlit,
 3 |   StreamlitComponentBase,
 4 |   withStreamlitConnection,
 5 | } from "streamlit-component-lib"
 6 | import React, { ReactNode } from "react"
 7 | 
 8 | 
 9 | class ScrollableText extends StreamlitComponentBase {
10 | 
11 |   public render = (): ReactNode => {
12 |     const text = this.props.args["text"]
13 |     const height_int = this.props.args["height"]
14 |     const border_bool = this.props.args["border"]
15 |     const font_fam = this.props.args["fontFamily"]
16 | 
17 |     const f_height = height_int + 'px';
18 | 
19 |     const f_border = border_bool ? '1px solid rgb(150,150,150,0.5)' : '0px solid rgb(150,150,150,0.5)'
20 |     
21 |     return (
22 |         <div style={{height:f_height, width:'auto', border:f_border, borderRadius:'0.2em', overflowY:'scroll'}}>
23 |           <div style={{marginLeft:'0.5em', fontFamily:font_fam, marginRight:'0.7em', marginTop:'0.2em', marginBottom:'0.5em', whiteSpace: 'pre-line'}}>{text}</div>
24 |         </div>
25 |     )
26 |   }
27 | }
28 | 
29 | export default withStreamlitConnection(ScrollableText)
30 | 


--------------------------------------------------------------------------------
/streamlit_scrollable_textbox/frontend/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "esModuleInterop": true,
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "noEmit": true,
16 |     "jsx": "react"
17 |   },
18 |   "include": ["src"]
19 | }
20 | 


--------------------------------------------------------------------------------