https://github.com/buhrmi/query-store

Keeps the browser's querystring in sync with a Svelte store
https://github.com/buhrmi/query-store

Last synced: 3 months ago
JSON representation

Keeps the browser's querystring in sync with a Svelte store

• Host: GitHub
• URL: https://github.com/buhrmi/query-store
• Owner: buhrmi
• Created: 2020-03-30T03:25:52.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-06-18T02:55:15.000Z (over 3 years ago)
• Last Synced: 2024-04-23T13:13:44.884Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 44
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-svelte-stores - query-store

README

        
# query-store

query-store gives you a writable svelte store that syncs with the URL's search params. Makes for easy bookmarking and sharing of UI state.

## Usage

```html

import query from 'query-store'

```

![demo](https://i.imgur.com/zhm9IkY.gif)

And that's all there is to it.

### History Navigation

To create a history entry on each query change (using pushState instead of replaceState), call `keepHistory` with the name of the param.

```html

import query from 'query-store'

query.keepHistory('seed')

Current seed is {$query.seed}

 $query.seed = Math.random()}>Generate new seed

```

### Integrate with routers

If you use a router that has its own navigation handling (eg Sapper), you can sync the router's query params to the query store like this:

```html

import query from 'query-store'

import { stores } from '@sapper/app'

const { page } = stores()

$: query.setWithoutHistory($page.query)

Current tab is {$query.tab}

Home

Details

Edit

```