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.

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

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.

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