{"id":15515865,"url":"https://github.com/kiosion/svelte-breakpoints","last_synced_at":"2025-04-13T18:14:29.186Z","repository":{"id":60536897,"uuid":"543814460","full_name":"kiosion/svelte-breakpoints","owner":"kiosion","description":"Svelte component and helper functions for creating easy responsive layouts with CSS media queries.","archived":false,"fork":false,"pushed_at":"2024-12-16T03:19:10.000Z","size":1320,"stargazers_count":16,"open_issues_count":7,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-13T18:14:16.129Z","etag":null,"topics":["css-media-queries","media-queries","responsive","svelte","svelte-component","svelte5","sveltejs","sveltekit"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kiosion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-30T22:39:49.000Z","updated_at":"2024-09-17T23:27:18.000Z","dependencies_parsed_at":"2023-02-18T19:15:31.568Z","dependency_job_id":"5a24ffde-da23-4073-ade7-9fcadebf70a0","html_url":"https://github.com/kiosion/svelte-breakpoints","commit_stats":{"total_commits":10,"total_committers":2,"mean_commits":5.0,"dds":0.09999999999999998,"last_synced_commit":"75b34acfb223c2c166c50fa16278bfdac2853f5b"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiosion%2Fsvelte-breakpoints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiosion%2Fsvelte-breakpoints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiosion%2Fsvelte-breakpoints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiosion%2Fsvelte-breakpoints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kiosion","download_url":"https://codeload.github.com/kiosion/svelte-breakpoints/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248758418,"owners_count":21156957,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-media-queries","media-queries","responsive","svelte","svelte-component","svelte5","sveltejs","sveltekit"],"created_at":"2024-10-02T10:04:39.841Z","updated_at":"2025-04-13T18:14:29.165Z","avatar_url":"https://github.com/kiosion.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-breakpoints\nSvelte component and helper functions for creating easy dynamic layouts with CSS media queries.\n\n\u003e [!Important]\n\u003e Since this package relies on CSS Media Query Listeners, content outside the Default slot is *not* rendered server-side. If you need conditional layouts based on screen sizes, and need SSR compatibility, use CSS `@media` queries in your styles instead.\n\n\u003e [!Note]\n\u003e v1.0 is currently in progress, and includes a rewrite of the component and helper function for use with Svelte v5's Runes. This readme references new functionality not present in the current version - the current version can be found under the [`v0` branch](https://github.com/kiosion/svelte-breakpoints/tree/v0).\n\n## Installation\nInstall using yarn / pnpm / npm:\n\n```bash\nyarn add -D svelte-breakpoints\n```\n```bash\npnpm add -D svelte-breakpoints\n```\n```bash\nnpm install --save-dev svelte-breakpoints\n```\n\n## Usage\n### Helpers\nImport `useMediaQuery` and provide a valid CSS media query. It will return a readable boolean store representing whether the media query matches.\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import { useMediaQuery } from 'svelte-breakpoints';\n\n  const isMobile: Readable\u003cboolean\u003e = useMediaQuery('(max-width: 600px)');\n\n  $effect(() =\u003e {\n    if ($isMobile) {\n      console.log('Not desktop!');\n    }\n  });\n\u003c/script\u003e\n\n{#if $isMobile}\n  \u003c!-- do something --\u003e\n{/if}\n```\n\nIt can be used for any valid CSS media queries.\n\n```ts\nimport { useMediaQuery } from 'svelte-breakpoints';\n\nconst prefersDark = useMediaQuery('(prefers-color-scheme: dark)');\n```\n\n`subscribeToQueries` allows subscribing to the state of multiple MQLs, as well as updating them after the initial function call. It returns a Readable store containing the names of all matching queries in an array.\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import { subscribeToQueries } from 'svelte-breakpoints';\n\n  const mediaQueries = {\n    reduceMotion: '(prefers-reduced-motion: reduce)',\n    prefersDark: '(prefers-color-scheme: dark)'\n  };\n\n  const matches: Readable\u003cstring[]\u003e = subscribeToQueries(mediaQueries);\n\n  $effect(() =\u003e {\n    if ($matches.includes('reduceMotion')) {\n      console.log('Reduced motion is enabled');\n    }\n  });\n\u003c/script\u003e\n```\n\n### Component\nImport the component and pass in the media queries to use. By default, the component will only render the last matching snippet, or the 'default' snippet if no queries match, finally falling back to the Default Slot if no snippets are provided. Passing `renderAll` will render all matching snippets rather than the last matching.\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import Breakpoints from 'svelte-breakpoints';\n\n  const mediaQueries = {\n    small: '(min-width: 0px)',\n    medium: '(min-width: 768px)',\n    large: '(min-width: 1024px)',\n  };\n\u003c/script\u003e\n\n\u003c!-- Using snippets as children --\u003e\n\u003cBreakpoints queries={mediaQueries}\u003e\n  {#snippet small()}\n    \u003cp\u003eScreen is less than 768px wide\u003c/p\u003e\n  {/snippet}\n  {#snippet medium()}\n    \u003cp\u003eScreen is at least 768px wide\u003c/p\u003e\n  {/snippet}\n  {#snippet large()}\n    \u003cp\u003eScreen is at least 1024px wide\u003c/p\u003e\n  {/snippet}\n\u003c/Breakpoints\u003e\n\n\u003c!-- Rendering all matching snippets --\u003e\n\u003cBreakpoints queries={mediaQueries} renderAll\u003e\n  {#snippet small()}\n    \u003cp\u003eScreen is less than 768px wide\u003c/p\u003e\n  {/snippet}\n  {#snippet medium()}\n    \u003cp\u003eScreen is at least 768px wide\u003c/p\u003e\n  {/snippet}\n  {#snippet large()}\n    \u003cp\u003eScreen is at least 1024px wide\u003c/p\u003e\n  {/snippet}\n\u003c/Breakpoints\u003e\n```\n\nYou can also define snippets elsewhere and pass them in via the `content` prop.\n\n`fallback` is reserved for fallback content if no snippets match. If no `fallback` is provided, the Default slot's content will be rendered.\n\n```html\n{#snippet fallback()}\n  \u003cp\u003eI'm defined elsewhere!\u003c/p\u003e\n{/snippet}\n{#snippet small()}\n  \u003cp\u003eI'm defined elsewhere too!\u003c/p\u003e\n{/snippet}\n\n\u003c!-- ... --\u003e\n\n\u003cBreakpoints queries={mediaQueries} content={{ small }} {fallback} /\u003e\n```\n\nBinding to `component.matches` returns a Readable store containing the names of all matching queries.\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  let componentInstance: { matches: Readable\u003c(string | number)[]\u003e } = $state({ matches: readable([]) }),\n    { matches } = $derived(componentInstance);\n\u003c/script\u003e\n\n\u003cBreakpoints queries={mediaQueries} bind:this={componentInstance}\u003e\n  {#if $matches.includes('large')}\n    \u003cp\u003eScreen is at least 1024px wide\u003c/p\u003e\n  {:else}\n    \u003cp\u003eScreen is less than 1024px wide\u003c/p\u003e\n  {/if}\n\u003c/Breakpoints\u003e\n```\n\nSince any valid CSS media queries can be used, you can also use queries such as `prefers-color-scheme`, `prefers-reduced-motion`, etc.\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import Breakpoints from 'svelte-breakpoints';\n\n  const mediaQueries = {\n    reducedMotion: '(prefers-reduced-motion: reduce)',\n  };\n\u003c/script\u003e\n\n\u003cBreakpoints queries={mediaQueries}\u003e\n  {#snippet reducedMotion()}\n    \u003cp\u003eReduced motion is enabled\u003c/p\u003e\n  {/snippet}\n  {#snippet default()}\n    \u003cp\u003eReduced motion is not enabled\u003c/p\u003e\n  {/snippet}\n\u003c/Breakpoints\u003e\n```\n\n## Development\nTo build the package, install deps with `pnpm install`, then run `pnpm build`. This will output the compiled files to the `dist` directory. To run the demo app, use `pnpm dev`.\n\n### Testing\nTo run all Playwright and Vitest tests, use `pnpm test`.\n\n## Issues\nIf you find any issues, please [open a new issue](https://github.com/kiosion/svelte-breakpoints/issues/new), or submit a pull request!\n\n## License\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiosion%2Fsvelte-breakpoints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkiosion%2Fsvelte-breakpoints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiosion%2Fsvelte-breakpoints/lists"}