Component
reflex_base.components.component.Component
A component with style, event trigger and other props.
Methods
add_imports
add_imports() -> ImportDict | list[ImportDict]Add imports for the component.
This method should be implemented by subclasses to add new imports for the component.
Implementations do NOT need to call super(). The result of calling add_imports in each parent class will be merged internally.
Returns
The additional imports for this component subclass.
The format of the return value is a dictionary where the keys are the library names (with optional npm-style version specifications) mapping to a single name to be imported, or a list names to be imported.
For advanced use cases, the values can be ImportVar instances (for example, to provide an alias or mark that an import is the default export from the given library).
return {
"react": "useEffect",
"react-draggable": ["DraggableCore", rx.ImportVar(tag="Draggable", is_default=True)],
}add_hooks
add_hooks() -> list[str | Var]Add hooks inside the component function.
Hooks are pieces of literal Javascript code that is inserted inside the React component function.
Each logical hook should be a separate string in the list.
Common strings will be deduplicated and inserted into the component function only once, so define const variables and other identical code in their own strings to avoid defining the same const or hook multiple times.
If a hook depends on specific data from the component instance, be sure to use unique values inside the string to avoid deduplication.
Implementations do NOT need to call super(). The result of calling add_hooks in each parent class will be merged and deduplicated internally.
Returns
The additional hooks for this component subclass.
return [
"const [count, setCount] = useState(0);",
"useEffect(() => { setCount((prev) => prev + 1); console.log(`mounted ${count} times`); }, []);",
]add_custom_code
add_custom_code() -> list[str]Add custom Javascript code into the page that contains this component.
Custom code is inserted at module level, after any imports.
Each string of custom code is deduplicated per-page, so take care to avoid defining the same const or function differently from different component instances.
Custom code is useful for defining global functions or constants which can then be referenced inside hooks or used by component vars.
Implementations do NOT need to call super(). The result of calling add_custom_code in each parent class will be merged and deduplicated internally.
Returns
The additional custom code for this component subclass.
return [
"const translatePoints = (event) => { return { x: event.clientX, y: event.clientY }; };",
]get_event_triggers
get_event_triggers() -> dict[str, ArgsSpec | Sequence[ArgsSpec]]Get the event triggers for the component.
Returns
The event triggers.
get_props
get_props() -> Iterable[str]Get the unique fields for the component.
Returns
The unique fields.
get_initial_props
get_initial_props() -> set[str]Get the initial props to set for the component.
Returns
The initial props to set.
create
create(*children, **props) -> TCreate the component.
Parameters
*children
The children of the component.
**props
The props of the component.
Returns
The component.
add_style
add_style() -> Optional[dict[str, Any]]Add style to the component.
Downstream components can override this method to return a style dict that will be applied to the component.
Returns
The style to add.
render
render() -> dictRender the component.
Returns
The dictionary for template of component.
get_ref
get_ref() -> Optional[str]Get the name of the ref for the component.
Returns
The ref name.