{"id":15288068,"url":"https://github.com/whitphx/streamlit-component-template-react-hooks","last_synced_at":"2025-04-13T06:33:57.912Z","repository":{"id":37068585,"uuid":"408132997","full_name":"whitphx/streamlit-component-template-react-hooks","owner":"whitphx","description":"Streamlit component lib with React hooks and template project using it","archived":false,"fork":false,"pushed_at":"2025-03-24T23:09:11.000Z","size":1081,"stargazers_count":61,"open_issues_count":6,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T23:04:38.669Z","etag":null,"topics":["hacktoberfest","npm","streamlit"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/whitphx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-19T13:21:05.000Z","updated_at":"2025-03-21T21:48:50.000Z","dependencies_parsed_at":"2024-06-19T19:02:59.267Z","dependency_job_id":"ea1e8841-7282-40d1-8f8d-b70cd58af10a","html_url":"https://github.com/whitphx/streamlit-component-template-react-hooks","commit_stats":{"total_commits":98,"total_committers":3,"mean_commits":"32.666666666666664","dds":"0.12244897959183676","last_synced_commit":"f4a0698d014ac7801b7c93d5114320d121431060"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whitphx%2Fstreamlit-component-template-react-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whitphx%2Fstreamlit-component-template-react-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whitphx%2Fstreamlit-component-template-react-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whitphx%2Fstreamlit-component-template-react-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whitphx","download_url":"https://codeload.github.com/whitphx/streamlit-component-template-react-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248674686,"owners_count":21143760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","npm","streamlit"],"created_at":"2024-09-30T15:44:02.003Z","updated_at":"2025-04-13T06:33:57.895Z","avatar_url":"https://github.com/whitphx.png","language":"TypeScript","funding_links":["https://ko-fi.com/D1D2ERWFG","https://www.buymeacoffee.com/whitphx","https://github.com/sponsors/whitphx"],"categories":[],"sub_categories":[],"readme":"# streamlit-component-template-react-hooks\n\n[![Test streamlit-component-lib-react-hooks](https://github.com/whitphx/streamlit-component-template-react-hooks/actions/workflows/lib-test.yaml/badge.svg)](https://github.com/whitphx/streamlit-component-template-react-hooks/actions/workflows/lib-test.yaml)\n\n[![version](https://img.shields.io/npm/v/streamlit-component-lib-react-hooks)](https://www.npmjs.com/package/streamlit-component-lib-react-hooks)\n[![license](https://img.shields.io/npm/l/streamlit-component-lib-react-hooks)](https://www.npmjs.com/package/streamlit-component-lib-react-hooks)\n\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/D1D2ERWFG)\n\n\u003ca href=\"https://www.buymeacoffee.com/whitphx\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" width=\"180\" height=\"50\" \u003e\u003c/a\u003e\n\n[![GitHub Sponsors](https://img.shields.io/github/sponsors/whitphx?label=Sponsor%20me%20on%20GitHub%20Sponsors\u0026style=social)](https://github.com/sponsors/whitphx)\n\nThis repo contains below.\n* A template for creating Streamlit Components with React Hooks and functional component style: [`./template`](./template).\n  * This is based on [the official React template](https://github.com/streamlit/component-template/tree/master/template). The original code has been copied to this repo and fixed to use React Hooks.\n* The source code of `streamlit-component-lib-react-hooks` npm package, which provides React-Hooks style API for Streamlit Component: [`./streamlit-component-lib-react-hooks`](streamlit-component-lib-react-hooks).\n  * This is only for development purpose and the users of `./template` do not have to see it.\n\n## Quickstart for the component template\n\n* Ensure you have [Python 3.6+](https://www.python.org/downloads/) and [Node.js](https://nodejs.org) installed.\n* Clone this repo.\n* Create a new Python virtual environment for the template:\n```\n$ cd template\n$ python3 -m venv venv  # create venv\n$ . venv/bin/activate   # activate venv\n$ pip install streamlit # install streamlit\n```\n* Initialize and run the component template frontend:\n```\n$ cd template/my_component/frontend\n$ yarn        # Install npm dependencies. `npm install` can be used instead.\n$ yarn start  # Start the Webpack dev server. `npm run start` can be used intead.\n```\n* From a separate terminal, run the template's Streamlit app:\n```\n$ cd template\n$ . venv/bin/activate  # activate the venv you created earlier\n$ streamlit run my_component/__init__.py  # run the example\n```\n* If all goes well, you should see something like this:\n![Quickstart Success](https://github.com/streamlit/component-template/blob/master/quickstart.png?raw=true)\n* Modify the frontend code at `my_component/frontend/src/MyComponent.tsx`.\n* Modify the Python code at `my_component/__init__.py`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhitphx%2Fstreamlit-component-template-react-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhitphx%2Fstreamlit-component-template-react-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhitphx%2Fstreamlit-component-template-react-hooks/lists"}