# NiceGUI React Integration
Integrate React components into your NiceGUI applications.
## Introduction
I created this package to seamlessly embed React components within NiceGUI projects. It handles bundling your React code using Vite, serves the compiled assets, and provides a way to pass props from Python to React and handle events from React in Python.
## Features
- **Easy Integration**: Embed React components directly into NiceGUI applications.
- **Props and Events**: Pass props and handle events between Python and React.
- **Automatic Bundling**: Automatically bundles your React code using Vite.
- **Caching**: Efficiently caches builds to improve performance during development.
## Installation
Install the package via pip:
```bash
pip install nicegui-react
```
## Requirements
- Python 3.6 or higher
- NiceGUI installed
- Node.js and npm installed (for building the React project)
## Usage
Here's how to use the React class in your NiceGUI application:
```python
from nicegui import ui
from nicegui_react import React
@ui.page("/")
async def index():
with ui.card():
ui.label('Here is the React component:')
ui.button('Click me', on_click=lambda: react.props(title="Updated Title"))
with ui.card_section():
react = React(
react_project_path="./path_to_your_react_project",
main_component="App" # Replace with your main component's name
).style('width: 100%; height: 100%;').props(
title="Hello from Python!"
).on('onClick', lambda event: ui.notify(f'Clicked on React component: {event}'))
```
## Parameters
- *react_project_path* (str): Path to your React project directory.
- *main_component* (str): Name of the main React component to render.
- *component_id* (str, optional): Unique identifier for the component instance.
- *env* (dict, optional): Environment variables to pass to the React app.
- *use_legacy_peer_deps* (bool, optional): Whether to use legacy peer dependencies during npm install.
- *dev* (bool, optional): If set to True, enables development mode.
## Methods
- props(**kwargs): Update the props passed to the React component.
- on(event_name, handler): Register an event handler for events emitted from React.
## Setting Up Your React Project
- Place your React project in a directory relative to your Python script.
- Ensure your package.json includes the necessary dependencies and scripts. The React class will help set this up if it's missing.
- Your main component should be properly exported.
## License
This project is licensed under the MIT License. See the LICENSE file for details.
## Contributing
If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are welcome.
## Contact
Feel free to reach out if you have any questions or suggestions.
Raw data
{
"_id": null,
"home_page": "https://github.com/puntorigen/nicegui-react",
"name": "nicegui-react",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": null,
"keywords": null,
"author": "Pablo Schaffner",
"author_email": "pablo@puntorigen.com",
"download_url": "https://files.pythonhosted.org/packages/41/be/ee100c69b066ee8c73810a98788b1a39623b2c9b0804d0f8c02dc7d887c6/nicegui_react-0.1.6.tar.gz",
"platform": null,
"description": "# NiceGUI React Integration\n\nIntegrate React components into your NiceGUI applications.\n\n## Introduction\n\nI created this package to seamlessly embed React components within NiceGUI projects. It handles bundling your React code using Vite, serves the compiled assets, and provides a way to pass props from Python to React and handle events from React in Python.\n\n## Features\n\n- **Easy Integration**: Embed React components directly into NiceGUI applications.\n- **Props and Events**: Pass props and handle events between Python and React.\n- **Automatic Bundling**: Automatically bundles your React code using Vite.\n- **Caching**: Efficiently caches builds to improve performance during development.\n\n## Installation\n\nInstall the package via pip:\n\n```bash\npip install nicegui-react\n```\n\n\n## Requirements\n- Python 3.6 or higher\n- NiceGUI installed\n- Node.js and npm installed (for building the React project)\n\n## Usage\nHere's how to use the React class in your NiceGUI application:\n\n```python\nfrom nicegui import ui\nfrom nicegui_react import React\n\n@ui.page(\"/\")\nasync def index():\n with ui.card():\n ui.label('Here is the React component:')\n ui.button('Click me', on_click=lambda: react.props(title=\"Updated Title\"))\n\n with ui.card_section():\n react = React(\n react_project_path=\"./path_to_your_react_project\",\n main_component=\"App\" # Replace with your main component's name\n ).style('width: 100%; height: 100%;').props(\n title=\"Hello from Python!\"\n ).on('onClick', lambda event: ui.notify(f'Clicked on React component: {event}'))\n```\n\n\n\n## Parameters\n- *react_project_path* (str): Path to your React project directory.\n- *main_component* (str): Name of the main React component to render.\n- *component_id* (str, optional): Unique identifier for the component instance.\n- *env* (dict, optional): Environment variables to pass to the React app.\n- *use_legacy_peer_deps* (bool, optional): Whether to use legacy peer dependencies during npm install.\n- *dev* (bool, optional): If set to True, enables development mode.\n\n## Methods\n- props(**kwargs): Update the props passed to the React component.\n- on(event_name, handler): Register an event handler for events emitted from React.\n\n## Setting Up Your React Project\n- Place your React project in a directory relative to your Python script.\n- Ensure your package.json includes the necessary dependencies and scripts. The React class will help set this up if it's missing.\n- Your main component should be properly exported.\n\n## License\nThis project is licensed under the MIT License. See the LICENSE file for details.\n\n## Contributing\nIf you'd like to contribute, please fork the repository and use a feature branch. Pull requests are welcome.\n\n## Contact\nFeel free to reach out if you have any questions or suggestions.\n",
"bugtrack_url": null,
"license": null,
"summary": "Integrate React components into NiceGUI applications",
"version": "0.1.6",
"project_urls": {
"Homepage": "https://github.com/puntorigen/nicegui-react"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "e083c339d1630e0d837d5defc56af41ac698c811a4d64155f0537af256461ff6",
"md5": "7ff3aab8ae64bd3fb3e055735e9cb56f",
"sha256": "02efa04a3f36d92b2d218184ee91690e899ffda79986d52af14c7240f8fd329d"
},
"downloads": -1,
"filename": "nicegui_react-0.1.6-py3-none-any.whl",
"has_sig": false,
"md5_digest": "7ff3aab8ae64bd3fb3e055735e9cb56f",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.6",
"size": 10598,
"upload_time": "2024-11-06T11:43:10",
"upload_time_iso_8601": "2024-11-06T11:43:10.504670Z",
"url": "https://files.pythonhosted.org/packages/e0/83/c339d1630e0d837d5defc56af41ac698c811a4d64155f0537af256461ff6/nicegui_react-0.1.6-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "41beee100c69b066ee8c73810a98788b1a39623b2c9b0804d0f8c02dc7d887c6",
"md5": "2c3d5d0aecec51148a99dde7d0052e7e",
"sha256": "21c2249d21f1e83c55af349b47648eb5f43a875eb232104b6c111052b9f68079"
},
"downloads": -1,
"filename": "nicegui_react-0.1.6.tar.gz",
"has_sig": false,
"md5_digest": "2c3d5d0aecec51148a99dde7d0052e7e",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 11705,
"upload_time": "2024-11-06T11:43:11",
"upload_time_iso_8601": "2024-11-06T11:43:11.876668Z",
"url": "https://files.pythonhosted.org/packages/41/be/ee100c69b066ee8c73810a98788b1a39623b2c9b0804d0f8c02dc7d887c6/nicegui_react-0.1.6.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-11-06 11:43:11",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "puntorigen",
"github_project": "nicegui-react",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "nicegui-react"
}
JSON
