useOn() / useOnDocument() / useOnWindow() | Tutorial

Use useOn() / useOnDocument() / useOnWindow() to programmatically set up listeners on host elements. This is useful when you are creating custom APIs and don't have access to place these events in the JSX or if the events are not known ahead of time, such as if they are created based on component props.

Example

The example on the right shows how to use useOn() method. Duplicate the code to explore how to use useOnDocument() / useOnWindow() and how they behave differently.