Component
reflex.components.component.ComponentA component with style, event trigger and other props.
Fields
| Prop | Description |
|---|---|
style: Style | The style of the component. |
event_triggers: Union | A mapping from event triggers to event chains. |
alias: str | The alias for the tag. |
is_default: bool | Whether the import is default or named. |
key: Any | A unique key for the component. |
id: Any | The id for the component. |
class_name: Any | The class name for the component. |
special_props: Var | Special component props. |
autofocus: bool | Whether the component should take the focus once the page is loaded |
custom_attrs: Union | custom attribute |
State: Type | State class associated with this component instance |
Methods
| Signature | Description |
|---|---|
add_imports(self) -> '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. |
add_hooks(self) -> '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. |
add_custom_code(self) -> '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. |
get_event_triggers(self) -> 'Dict[str, types.ArgsSpec | Sequence[types.ArgsSpec]]' | Get the event triggers for the component. |
get_props(cls) -> 'Set[str]' | Get the unique fields for the component. |
get_initial_props(cls) -> 'Set[str]' | Get the initial props to set for the component. |
get_component_props(cls) -> 'set[str]' | Get the props that expected a component as value. |
create(cls, *children, **props) -> 'Component' | Create the component. |
add_style(self) -> 'dict[str, Any] | None' | Add style to the component. Downstream components can override this method to return a style dict that will be applied to the component. |
render(self) -> 'Dict' | Render the component. |
get_ref(self) -> 'str | None' | Get the name of the ref for the component. |