https://github.com/whitphx/streamlit-component-template-react-hooks

Streamlit component lib with React hooks and template project using it
https://github.com/whitphx/streamlit-component-template-react-hooks

hacktoberfest npm streamlit

Last synced: about 2 months ago
JSON representation

Streamlit component lib with React hooks and template project using it

• Host: GitHub
• URL: https://github.com/whitphx/streamlit-component-template-react-hooks
• Owner: whitphx
• License: mit
• Created: 2021-09-19T13:21:05.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-05T09:43:12.000Z (10 months ago)
• Last Synced: 2024-10-31T18:27:05.025Z (about 2 months ago)
• Topics: hacktoberfest, npm, streamlit
• Language: TypeScript
• Homepage:
• Size: 1.14 MB
• Stars: 56
• Watchers: 2
• Forks: 12
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# streamlit-component-template-react-hooks

[![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)

[![version](https://img.shields.io/npm/v/streamlit-component-lib-react-hooks)](https://www.npmjs.com/package/streamlit-component-lib-react-hooks)

[![license](https://img.shields.io/npm/l/streamlit-component-lib-react-hooks)](https://www.npmjs.com/package/streamlit-component-lib-react-hooks)

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/D1D2ERWFG)



[![GitHub Sponsors](https://img.shields.io/github/sponsors/whitphx?label=Sponsor%20me%20on%20GitHub%20Sponsors&style=social)](https://github.com/sponsors/whitphx)

This repo contains below.

* A template for creating Streamlit Components with React Hooks and functional component style: [`./template`](./template).

  * 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.

* 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).

  * This is only for development purpose and the users of `./template` do not have to see it.

## Quickstart for the component template

* Ensure you have [Python 3.6+](https://www.python.org/downloads/), [Node.js](https://nodejs.org), and [yarn](https://yarnpkg.com/getting-started/install) (or [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)) installed.

* Clone this repo.

* Create a new Python virtual environment for the template:

```

$ cd template

$ python3 -m venv venv  # create venv

$ . venv/bin/activate   # activate venv

$ pip install streamlit # install streamlit

```

* Initialize and run the component template frontend:

```

$ cd template/my_component/frontend

$ yarn        # Install npm dependencies. `npm install` can be used instead.

$ yarn start  # Start the Webpack dev server. `npm run start` can be used intead.

```

* From a separate terminal, run the template's Streamlit app:

```

$ cd template

$ . venv/bin/activate  # activate the venv you created earlier

$ streamlit run my_component/__init__.py  # run the example

```

* If all goes well, you should see something like this:

![Quickstart Success](https://github.com/streamlit/component-template/blob/master/quickstart.png?raw=true)

* Modify the frontend code at `my_component/frontend/src/MyComponent.tsx`.

* Modify the Python code at `my_component/__init__.py`.