> For the complete documentation index, see [llms.txt](https://refract.js.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://refract.js.org/usage/observing-anything.md).

# Observing Anything

As explained in the [dependency injection](/usage/injecting-dependencies.md) documentation, you can add dependencies to your `aperture` via React props. By passing observable data sources as props, you can observe anything you wish, and trigger side-effects in response.

In addition, your `aperture` is a blank slate, and allows you to observe anything which exists in the global context such as time or events.

## Events

By using your streaming library's utilities aimed at creating observables, you can respond to any events available in JavaScript.

For example, you can observe the `window.popstate` event to respond to the user clicking back/forward in the browser:

```javascript
const aperture = component => {
    const popstate$ = fromEvent(window, 'popstate').pipe(
        map(event => ({
            type: 'POPSTATE',
            state: event.state
        }))
    )
}
```

Or as another example, you could listen to the `window.resize` event in order to dynamically alter your logic depending on the user's screen size:

```javascript
const aperture = component => {
    const resize$ = fromEvent(window, 'resize').pipe(debounce(500))
}
```

## Time

Your streaming library will also provide utilities for observing the passing of time.

For example, if you want to do something once every few seconds as a kind of background process, it's easy to create an interval stream:

```javascript
const aperture = component => {
    const interval$ = interval(4000) // emits once every four seconds
}
```

## Custom Dependencies

It's also possible to create your own dependencies with custom methods similar to our `component.observe` and `store.observe`, and expose them through dependency injection via props. If you do, please publish them so that others can use it too!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://refract.js.org/usage/observing-anything.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.