Props

When wrapping a React component, you want to define the props that will be accepted by the component. This is done by defining the props and annotating them with a rx.Var.

Broadly, there are three kinds of props you can encounter when wrapping a React component:

1. Simple Props: These are props that are passed directly to the component. They can be of any type, including strings, numbers, booleans, and even lists or dictionaries.
2. Callback Props: These are props that expect to receive a function. That function will usually be called by the component as a callback. (This is different from event handlers.)
3. Component Props: These are props that expect to receive a components themselves. They can be used to create more complex components by composing them together.
4. Event Handlers: These are props that expect to receive a function that will be called when an event occurs. They are defined as rx.EventHandler with a signature function to define the spec of the event.

Simple props are the most common type of props you will encounter when wrapping a React component. They are passed directly to the component and can be of any type (but most commonly strings, numbers, booleans, and structures).

For custom types, you can use TypedDict to define the structure of the custom types. However, if you need the attributes to be automatically converted to camelCase once compiled in JS, you can use rx.PropsBase instead of TypedDict.

Callback props are used to handle events or to pass data back to the parent component. They are defined as rx.Var with a type of FunctionVar or Callable.

Some components will occasionally accept other components as props, usually annotated as ReactNode. In Reflex, these are defined as rx.Component.

Event handlers are props that expect to receive a function that will be called when an event occurs. They are defined as rx.EventHandler with a signature function to define the spec of the event.