Custom Code and Hooks

When wrapping a React component, you may need to define custom code or hooks that are specific to the component. This is done by defining the add_custom_codeor add_hooks methods in your component class.

Custom code is any JS code that need to be included in your page, but not necessarily in the component itself. This can include things like CSS styles, JS libraries, or any other code that needs to be included in the page.

class CustomCodeComponent(MyBaseComponent):
    """MyComponent."""

    def add_custom_code(self) -> list[str]:
        """Add custom code to the component."""
        code1 = """const customVariable = "Custom code1";"""
        code2 = """console.log(customVariable);"""

        return [code1, code2]

The above example will render the following JS code in the page:

/* import here */

const customVariable = "Custom code1";
console.log(customVariable);

/* rest of the page code */

Custom hooks are any hooks that need to be included in your component. This can include things like useEffect, useState, or any other hooks from the library you are wrapping.

• Simple hooks can be added as strings.
• More complex hooks that need to have special import or be written in a specific order can be added as rx.Var with a VarData object to specify the position of the hook.
• The imports attribute of the VarData object can be used to specify any imports that need to be included in the component.
• The position attribute of the VarData object can be set to Hooks.HookPosition.PRE_TRIGGER or Hooks.HookPosition.POST_TRIGGER to specify the position of the hook in the component.

from reflex.vars.base import Var, VarData
from reflex_base.constants import Hooks
from reflex.components.el.elements import Div


class ComponentWithHooks(Div, MyBaseComponent):
    """MyComponent."""

    def add_hooks(self) -> list[str | Var]:
        """Add hooks to the component."""
        hooks = []
        hooks1 = """const customHookVariable = "some value";"""
        hooks.append(hooks1)

        # A hook that need to be written before the memoized event handlers.
        hooks2 = Var(
            """useEffect(() => {
                console.log("PreTrigger: " + customHookVariable);
            }, []);
            """,
            _var_data=VarData(
                imports={
                    "react": ["useEffect"],
                },
                position=Hooks.HookPosition.PRE_TRIGGER,
            ),
        )
        hooks.append(hooks2)

        hooks3 = Var(
            """useEffect(() => {
                console.log("PostTrigger: " + customHookVariable);
            }, []);
            """,
            _var_data=VarData(
                imports={
                    "react": ["useEffect"],
                },
                position=Hooks.HookPosition.POST_TRIGGER,
            ),
        )
        hooks.append(hooks3)
        return hooks

The ComponentWithHooks will be rendered in the component in the following way:

export function Div_7178f430b7b371af8a12d8265d65ab9b() {
  const customHookVariable = "some value";

  useEffect(() => {
    console.log("PreTrigger: " + customHookVariable);
  }, []);

  /* memoized triggers such as on_click, on_change, etc will render here */

  useEffect(() => {
    console.log("PostTrigger: "+ customHookVariable);
  }, []);

  return jsx("div", {});
}

add_hooks inserts hook statements into the component, but the values they define are not directly accessible from Python. When you need the return value of a no-argument hook, use rx.vars.use_hook_var(), which binds the hook call to a unique variable name and returns it as a Var. The hook statement and its import are automatically included in any component where the var is used, so it composes with regular props and var operations.

import reflex as rx


def use_chart_width() -> rx.Var[int | None]:
    """Get the width of the enclosing recharts chart as a var."""
    return rx.vars.use_hook_var(
        library="[email protected]", hook="useChartWidth", _var_type=int | None
    )

For React's built-in , rx.vars.use_id() returns a Var[str] with a stable unique id for the component being rendered, e.g. for linking SVG elements to gradient or filter definitions.

A hook var is evaluated once per compiled component, so every element that reads it must render inside the same one. An rx.el.svg root, an @rx.memo body, and a custom renderer body each compile into a single component and satisfy this.