# streamlit-clickable-list
See demo: https://clickable-list.streamlit.app/
## How to install
```
pip install streamlit-clickable-list
```
## How to use
```python
col1, col2 = st.columns([1, 1])
with col1:
def on_click(name: str) -> None:
print(f"clicked: {name}")
st.session_state['clicked'] = name
st.header("Clickable list:")
clickable_list(["aaa", "bbb", "ccc"], on_click, key="clickable_list")
with col2:
st.header("Result:")
if "clicked" in st.session_state:
st.write(f"Clicked: {st.session_state['clicked'] or 'none'}")
```
## For the component development
Based on: https://docs.streamlit.io/develop/concepts/custom-components/intro
### Set up
- Set up python environment and dependencies
- Used: v3.9
- If you use `uv`, run:
```
uv sync
```
- Set up Node.js environment
- Used v22.13.1
- If you use `nvm`, run:
```
nvm use
```
- Set up node_modules
```
cd frontend
npm install
```
### Run dev
- Use dev mode
- Edit `streamlit_clickable_list/__init__.py`
```diff
-_RELEASE = True
+_RELEASE = False
```
- Run dev server
```
cd frontend
npm start
```
- Then, a server will be run in port=3001
- Run streamlit app
```
streamlit run sample.py
# with WSL + uv
uv run streamlit run sample.py --server.fileWatcherType=poll --server.address=0.0.0.0
```
- Then, see `localhost:8501` in your browser
### Develop demo/demo.py
- Make symbolic link
```
ln -s demo/demo.py ./
```
- `demo/demo.py` use streamlit-clickable-list from PyPI. The symbolic link allow it to use local component code
- Run streamlit app
```
streamlit run demo.py
# with WSL + uv
uv run streamlit run demo.py --server.fileWatcherType=poll --server.address=0.0.0.0
```
- Then, see `localhost:8501` in your browser
- Edit `demo/demo.py`
### Release to PyPI
- Use release mode
- Edit `streamlit_clickable_list/__init__.py`
```diff
-_RELEASE = False
+_RELEASE = True
```
- Build react app
```
cd frontend
npm build
```
- Run the app to check it in local
```
streamlit run sample.py
# with WSL + uv
uv run streamlit run sample.py --server.fileWatcherType=poll --server.address=0.0.0.0
```
- Update version
- Edit `pyproject.toml` to change version
```diff
[project]
name = "streamlit-clickable-list"
-version = "X.Y.Z"
+version = "X.Y.W"
```
- Build python
- If you use `uv`, run:
```
rm dist/streamlit_clickable_list-*
uv build
```
- Push to GitHub (if you update `README.md`)
```
git push origin main
```
- Publish to PyPI
```
uv publish --token <PyPI token>
```
- Check `$HOME/.pypirc` for \<PyPI token\>
### Release to Streamlit Community Cloud
Only the first time:
- Log in [Streamlit Community Cloud](https://streamlit.io/cloud)
- "Create app" > "Deploy a public app from GitHub"
- Input info in "Deploy an app"
To publish:
- First, publish it to PyPI
- Because the app in Streamlit Community Cloud uses the streamlit-clickable-list in PyPI
- Add new packege in `requirement.txt` if needed
- Do NOT use `uv pip compile pyproject.toml > requirements.txt`
- The demo app in Streamlit Community Cloud needs streamlit-clickable-list package from pypi, though the package from pypi is not necessary to develop the component
- Push github, then it will be deployed to Streamlit Community Cloud
```
git push origin main
```
Raw data
{
"_id": null,
"home_page": null,
"name": "streamlit-clickable-list",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "streamlit, component, clickable, list, text",
"author": "mu-777",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/5f/ef/591ab084b4978afa1aa0ed1b15f255476b7c7e693e3703cb9d638a208f0b/streamlit_clickable_list-0.1.4.tar.gz",
"platform": null,
"description": "# streamlit-clickable-list\n\nSee demo: https://clickable-list.streamlit.app/\n\n## How to install\n```\npip install streamlit-clickable-list\n```\n\n## How to use\n\n```python\ncol1, col2 = st.columns([1, 1])\nwith col1:\n def on_click(name: str) -> None:\n print(f\"clicked: {name}\")\n st.session_state['clicked'] = name\n\n st.header(\"Clickable list:\")\n clickable_list([\"aaa\", \"bbb\", \"ccc\"], on_click, key=\"clickable_list\")\n\nwith col2:\n st.header(\"Result:\")\n if \"clicked\" in st.session_state:\n st.write(f\"Clicked: {st.session_state['clicked'] or 'none'}\")\n\n```\n\n\n\n## For the component development\n\nBased on: https://docs.streamlit.io/develop/concepts/custom-components/intro\n\n### Set up\n\n- Set up python environment and dependencies\n - Used: v3.9\n - If you use `uv`, run:\n ```\n uv sync\n ```\n- Set up Node.js environment\n - Used v22.13.1\n - If you use `nvm`, run:\n ```\n nvm use\n ```\n- Set up node_modules\n ```\n cd frontend\n npm install\n ```\n\n### Run dev\n\n- Use dev mode\n - Edit `streamlit_clickable_list/__init__.py`\n ```diff\n -_RELEASE = True\n +_RELEASE = False\n ```\n- Run dev server\n ```\n cd frontend\n npm start\n ```\n - Then, a server will be run in port=3001\n- Run streamlit app\n ```\n streamlit run sample.py\n\n # with WSL + uv\n uv run streamlit run sample.py --server.fileWatcherType=poll --server.address=0.0.0.0\n ```\n - Then, see `localhost:8501` in your browser\n\n### Develop demo/demo.py\n\n- Make symbolic link\n ```\n ln -s demo/demo.py ./\n ```\n - `demo/demo.py` use streamlit-clickable-list from PyPI. The symbolic link allow it to use local component code\n- Run streamlit app\n ```\n streamlit run demo.py\n\n # with WSL + uv\n uv run streamlit run demo.py --server.fileWatcherType=poll --server.address=0.0.0.0\n ```\n - Then, see `localhost:8501` in your browser\n- Edit `demo/demo.py`\n\n### Release to PyPI\n\n- Use release mode\n - Edit `streamlit_clickable_list/__init__.py`\n ```diff\n -_RELEASE = False\n +_RELEASE = True\n ```\n- Build react app\n ```\n cd frontend\n npm build\n ```\n- Run the app to check it in local\n ```\n streamlit run sample.py\n\n # with WSL + uv\n uv run streamlit run sample.py --server.fileWatcherType=poll --server.address=0.0.0.0\n ```\n- Update version\n - Edit `pyproject.toml` to change version\n ```diff\n [project]\n name = \"streamlit-clickable-list\"\n -version = \"X.Y.Z\"\n +version = \"X.Y.W\"\n ```\n- Build python\n - If you use `uv`, run:\n ```\n rm dist/streamlit_clickable_list-*\n uv build\n ```\n- Push to GitHub (if you update `README.md`)\n ```\n git push origin main\n ```\n- Publish to PyPI\n ```\n uv publish --token <PyPI token>\n ```\n - Check `$HOME/.pypirc` for \\<PyPI token\\>\n\n### Release to Streamlit Community Cloud\n\nOnly the first time:\n- Log in [Streamlit Community Cloud](https://streamlit.io/cloud)\n- \"Create app\" > \"Deploy a public app from GitHub\"\n- Input info in \"Deploy an app\"\n\nTo publish:\n- First, publish it to PyPI\n - Because the app in Streamlit Community Cloud uses the streamlit-clickable-list in PyPI\n- Add new packege in `requirement.txt` if needed\n - Do NOT use `uv pip compile pyproject.toml > requirements.txt`\n - The demo app in Streamlit Community Cloud needs streamlit-clickable-list package from pypi, though the package from pypi is not necessary to develop the component\n- Push github, then it will be deployed to Streamlit Community Cloud\n ```\n git push origin main\n ```\n\n",
"bugtrack_url": null,
"license": null,
"summary": "A simple clickable list component for streamlit",
"version": "0.1.4",
"project_urls": {
"Demo": "https://clickable-list.streamlit.app/",
"Repository": "https://github.com/mu-777/streamlit-clickable-list"
},
"split_keywords": [
"streamlit",
" component",
" clickable",
" list",
" text"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "694e1883cebc90737719ceae2459c0e504392040fa9bb7af7daf4be62ae2940f",
"md5": "dab06534ca5fda58f1030115ccce7081",
"sha256": "d0ac785d4cef6199084d3098a5e8390c42b0032dc484e5bd40f7c76f54f3a227"
},
"downloads": -1,
"filename": "streamlit_clickable_list-0.1.4-py3-none-any.whl",
"has_sig": false,
"md5_digest": "dab06534ca5fda58f1030115ccce7081",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 408405,
"upload_time": "2025-02-01T21:00:27",
"upload_time_iso_8601": "2025-02-01T21:00:27.843201Z",
"url": "https://files.pythonhosted.org/packages/69/4e/1883cebc90737719ceae2459c0e504392040fa9bb7af7daf4be62ae2940f/streamlit_clickable_list-0.1.4-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "5fef591ab084b4978afa1aa0ed1b15f255476b7c7e693e3703cb9d638a208f0b",
"md5": "53cb9090951a10b889165de018f976fd",
"sha256": "e1050c6605f23ed3c220859cdb14de5e59dd8e737ea03a36fc81a994c9612021"
},
"downloads": -1,
"filename": "streamlit_clickable_list-0.1.4.tar.gz",
"has_sig": false,
"md5_digest": "53cb9090951a10b889165de018f976fd",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 405614,
"upload_time": "2025-02-01T21:00:29",
"upload_time_iso_8601": "2025-02-01T21:00:29.687178Z",
"url": "https://files.pythonhosted.org/packages/5f/ef/591ab084b4978afa1aa0ed1b15f255476b7c7e693e3703cb9d638a208f0b/streamlit_clickable_list-0.1.4.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-02-01 21:00:29",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "mu-777",
"github_project": "streamlit-clickable-list",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "streamlit-clickable-list"
}
JSON
