Merge branch 'main' of https://github.com/reflex-dev/reflex-web into carlos/replace-some-docs

carlosabadia · carlosabadia · commit 0c6c510efc18 · 2026-04-02T21:08:30.000+02:00
diff --git a/blog/build-python-admin-panels-internal-tools-guide.md b/blog/build-python-admin-panels-internal-tools-guide.md
@@ -20,7 +20,7 @@ faq: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 Most Python developers hit the same wall when [building internal tools](https://blog.tooljet.com/build-internal-apps-without-frontend-developers/). You finish the backend logic, then face rebuilding the interface in a JavaScript framework you'd rather avoid. Now you can [build approval workflows in Python](https://reflex.dev/) and skip the context switching. We'll show you how to create complete admin panels with forms, tables, authentication, and business process automation using Python alone.
diff --git a/blog/custom-components.md b/blog/custom-components.md
@@ -49,7 +49,7 @@ And use it right away like any other Reflex component.
 ```python demo exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def zoom():
     src = f"{REFLEX_ASSETS_CDN}blog/custom_components.webp"
diff --git a/blog/enterprise-ready-ai-app-builder.md b/blog/enterprise-ready-ai-app-builder.md
@@ -20,7 +20,7 @@ faq: [
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.constants import REFLEX_ASSETS_CDN
 ```
 
diff --git a/blog/how-to-build-python-web-app-complete-tutorial.md b/blog/how-to-build-python-web-app-complete-tutorial.md
@@ -19,7 +19,7 @@ faq: [
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.constants import REFLEX_ASSETS_CDN
 ```
 
diff --git a/blog/internal-tool-builders.md b/blog/internal-tool-builders.md
@@ -17,7 +17,7 @@ faq: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/on-premises-deployment.md b/blog/on-premises-deployment.md
@@ -40,7 +40,7 @@ faq: [
 import reflex as rx
 import reflex_ui as ui
 from pcweb import pages, constants
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from reflex_ui.blocks.demo_form import demo_form_dialog
 ```
 
diff --git a/blog/python-comparison.md b/blog/python-comparison.md
@@ -19,7 +19,7 @@ faq: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/reflex-architecture.md b/blog/reflex-architecture.md
@@ -95,7 +95,7 @@ Under the hood, Reflex apps compile down to a [React](https://react.dev) fronten
 The diagram below provides a detailed overview of how a Reflex app works. We'll go through each part in more detail in the following sections.
 
 ```python exec
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/blog/reflex-dash.md b/blog/reflex-dash.md
@@ -18,7 +18,7 @@ meta: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/reflex-jupyter.md b/blog/reflex-jupyter.md
@@ -95,7 +95,7 @@ for feature, importance in zip(features, rf.feature_importances_):
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def render_image():
     return rx.el.div(
diff --git a/blog/reflex-streamlit.md b/blog/reflex-streamlit.md
@@ -21,7 +21,7 @@ faq: [
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/top-10-data-visualization-libraries.md b/blog/top-10-data-visualization-libraries.md
@@ -19,7 +19,7 @@ faq: [
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/top-5-ai-app-builders.md b/blog/top-5-ai-app-builders.md
@@ -19,7 +19,7 @@ faq: [
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/top-python-web-frameworks.md b/blog/top-python-web-frameworks.md
@@ -22,7 +22,7 @@ faq: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/case-studies/bayesline.md b/case-studies/bayesline.md
@@ -46,7 +46,7 @@ meta: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.pages.docs import enterprise
 from pcweb.pages.customers.views.app_preview_card import app_preview_card
 ```
diff --git a/pcweb/components/image_zoom.py b/pcweb/components/image_zoom.py
@@ -0,0 +1,23 @@
+"""Reflex custom component ImageZoom."""
+
+import reflex as rx
+
+
+class ImageZoom(rx.NoSSRComponent):
+    """ImageZoom component."""
+
+    # The React library to wrap.
+    library = "react-medium-image-zoom@5.4.2"
+
+    # The React component tag.
+    tag = "Zoom"
+
+    # If the tag is the default export from the module, you must set is_default = True.
+    is_default = True
+
+    # To add custom code to your component
+    def _get_custom_code(self) -> str:
+        return "import 'react-medium-image-zoom/dist/styles.css'"
+
+
+image_zoom = ImageZoom.create
diff --git a/pcweb/pages/customers/views/app_preview_card.py b/pcweb/pages/customers/views/app_preview_card.py
@@ -1,5 +1,6 @@
 import reflex as rx
-from reflex_image_zoom import image_zoom
+
+from pcweb.components.image_zoom import image_zoom
 
 
 def app_preview_card(image_url: str, text: str) -> rx.Component:
diff --git a/pcweb/pages/databricks/databricks.md b/pcweb/pages/databricks/databricks.md
@@ -1,6 +1,6 @@
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ## Databricks Integration with Reflex
diff --git a/pcweb/pages/use_cases/use_cases.md b/pcweb/pages/use_cases/use_cases.md
@@ -5,7 +5,7 @@ Organizations across industries use **Reflex** to build internal tools, dashboar
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ### 1. Database Admin & CRUD
diff --git a/pyproject.toml b/pyproject.toml
@@ -23,7 +23,6 @@ dependencies = [
     "reflex-docgen @ git+https://github.com/reflex-dev/reflex@carlos/move-docs-from-web#subdirectory=packages/reflex-docgen",
     "reflex-enterprise",
     "reflex-hosting-cli",
-    "reflex-image-zoom",
     "reflex-pyplot",
     "reflex-ui @ git+https://github.com/reflex-dev/reflex-ui@main",
     "requests",
diff --git a/uv.lock b/uv.lock
