Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Api-reference

/

Component

reflex.components.component.Component

A component with style, event trigger and other props.

PropDescription
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

SignatureDescription
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, Any]'Get the event triggers for the component.
apply_theme(self, theme: 'Optional[Component]')Apply a theme to the component and its children.
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.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting