--- NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts title: svelte/reactivity --- Svelte provides reactive versions of various built-ins like [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) that can be used just like their native counterparts, as well as a handful of additional utilities for handling reactivity. ```js // @noErrors import { MediaQuery, SvelteDate, SvelteMap, SvelteSet, SvelteURL, SvelteURLSearchParams, createSubscriber } from 'svelte/reactivity'; ``` ## MediaQuery

Available since 5.7.0

Creates a media query and provides a `current` property that reflects whether or not it matches. Use it carefully — during server-side rendering, there is no way to know what the correct value should be, potentially causing content to change upon hydration. If you can use the media query in CSS to achieve the same effect, do that. ```svelte

{large.current ? 'large screen' : 'small screen'}

```

```dts class MediaQuery extends ReactiveValue {/*…*/} ```

```dts constructor(query: string, fallback?: boolean | undefined); ```

- `query` A media query string - `fallback` Fallback value for the server

## SvelteDate A reactive version of the built-in [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object. Reading the date (whether with methods like `date.getTime()` or `date.toString()`, or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived) will cause it to be re-evaluated when the value of the date changes. ```svelte

The time is {formatter.format(date)}

```

```dts class SvelteDate extends Date {/*…*/} ```

```dts constructor(...params: any[]); ```

## SvelteMap A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object. Reading contents of the map (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived) will cause it to be re-evaluated as necessary when the map is updated. Note that values in a reactive map are _not_ made [deeply reactive](/docs/svelte/$state#Deep-state). ```svelte

{#each Array(9), i} {/each}

{#if winner}

{winner} wins!

{:else}

{player} is next

{/if} ```

```dts class SvelteMap extends Map {/*…*/} ```

```dts constructor(value?: Iterable | null | undefined); ```

```dts set(key: K, value: V): this; ```

## SvelteSet A reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object. Reading contents of the set (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](/playground/53438b51194b4882bcc18cddf9f96f15) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived) will cause it to be re-evaluated as necessary when the set is updated. Note that values in a reactive set are _not_ made [deeply reactive](/docs/svelte/$state#Deep-state). ```svelte {#each ['🙈', '🙉', '🙊'] as monkey} {/each} {#if monkeys.has('🙈')}

see no evil

{/if} {#if monkeys.has('🙉')}

hear no evil

{/if} {#if monkeys.has('🙊')}

speak no evil

{/if} ```

```dts class SvelteSet extends Set {/*…*/} ```

```dts constructor(value?: Iterable | null | undefined); ```

```dts add(value: T): this; ```

## SvelteURL A reactive version of the built-in [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object. Reading properties of the URL (such as `url.href` or `url.pathname`) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived) will cause it to be re-evaluated as necessary when the URL changes. The `searchParams` property is an instance of [SvelteURLSearchParams](/docs/svelte/svelte-reactivity#SvelteURLSearchParams). [Example](/playground/5a694758901b448c83dc40dc31c71f2a): ```svelte

```

```dts class SvelteURL extends URL {/*…*/} ```

```dts get searchParams(): SvelteURLSearchParams; ```

## SvelteURLSearchParams A reactive version of the built-in [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object. Reading its contents (by iterating, or by calling `params.get(...)` or `params.getAll(...)` as in the [example](/playground/b3926c86c5384bab9f2cf993bc08c1c8) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived) will cause it to be re-evaluated as necessary when the params are updated. ```svelte

?{params.toString()}

{#each params as [key, value]}

{key}: {value}

{/each} ```

```dts class SvelteURLSearchParams extends URLSearchParams {/*…*/} ```

```dts [REPLACE](params: URLSearchParams): void; ```

## createSubscriber

Available since 5.7.0

Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity. It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`. If `subscribe` is called inside an effect (including indirectly, for example inside a getter), the `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs. If `start` returns a cleanup function, it will be called when the effect is destroyed. If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects are active, and the returned teardown function will only be called when all effects are destroyed. It's best understood with an example. Here's an implementation of [`MediaQuery`](/docs/svelte/svelte-reactivity#MediaQuery): ```js // @errors: 7031 import { createSubscriber } from 'svelte/reactivity'; import { on } from 'svelte/events'; export class MediaQuery { #query; #subscribe; constructor(query) { this.#query = window.matchMedia(`(${query})`); this.#subscribe = createSubscriber((update) => { // when the `change` event occurs, re-run any effects that read `this.current` const off = on(this.#query, 'change', update); // stop listening when all the effects are destroyed return () => off(); }); } get current() { // This makes the getter reactive, if read in an effect this.#subscribe(); // Return the current state of the query, whether or not we're in an effect return this.#query.matches; } } ```

```dts function createSubscriber( start: (update: () => void) => (() => void) | void ): () => void; ```