10 | {JSON.stringify(queryState, null, ' ')}
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/examples/use-location-state/src/index.tsx:
--------------------------------------------------------------------------------
1 | import '@ungap/url-search-params'
2 | import 'react-app-polyfill/ie11'
3 | import 'react-app-polyfill/stable'
4 | import React from 'react'
5 | import ReactDOM from 'react-dom'
6 | import './styles/index.scss'
7 | import App from './App'
8 |
9 | export function render() {
10 | ReactDOM.render(
10 | {JSON.stringify(queryState, null, ' ')}
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/examples/react-router-use-location-state/src/index.tsx:
--------------------------------------------------------------------------------
1 | import '@ungap/url-search-params'
2 | import 'react-app-polyfill/ie11'
3 | import 'react-app-polyfill/stable'
4 | import React from 'react'
5 | import ReactDOM from 'react-dom'
6 | import './styles/index.scss'
7 | import App from './App'
8 |
9 | export function render() {
10 | ReactDOM.render(
20 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/src/examples/react-router-use-location-state/src/pages/test/__snapshots__/QueryStateTest.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`QueryStateDemo can set name with button 1`] = `
4 |
7 | {
8 | "name": "Felix",
9 | "age": 25,
10 | "active": false
11 | }
12 |
13 | `;
14 |
15 | exports[`QueryStateDemo can set name with button 2`] = `
16 |
19 | {
20 | "name": "Kim",
21 | "age": 25,
22 | "active": false
23 | }
24 |
25 | `;
26 |
27 | exports[`QueryStateDemo can set name with button 3`] = `
28 |
31 | {
32 | "name": "Sarah",
33 | "age": 25,
34 | "active": false
35 | }
36 |
37 | `;
38 |
--------------------------------------------------------------------------------
/src/examples/nextjs/components/NamesList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useQueryState } from 'use-location-state/next'
3 |
4 | export default function NamesList() {
5 | const [names, setNames] = useQueryState('names', [])
6 |
7 | return (
8 | -
9 | {names.map((name, nameIndex) => (
10 |
- 11 | {name}{' '} 12 | 24 | 25 | ))} 26 |
404 Not found
, 11 | }: Props) { 12 | let pathname = window.location.pathname || '/' 13 | let trimmedPathname = '' 14 | 15 | // tolerate (missing) trailing slashes 16 | if (pathname.slice(-1) === '/') { 17 | trimmedPathname = pathname.slice(0, -1) 18 | } else { 19 | trimmedPathname = pathname 20 | pathname = pathname + '/' 21 | } 22 | 23 | return ( 24 | componentsForPathname[pathname] || 25 | componentsForPathname[trimmedPathname] || 26 | defaultComponent 27 | ) 28 | } 29 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | strategy: 10 | matrix: 11 | node-version: [18.x] 12 | steps: 13 | - uses: actions/checkout@v1 14 | - name: Use Node.js ${{ matrix.node-version }} 15 | uses: actions/setup-node@v1 16 | with: 17 | node-version: ${{ matrix.node-version }} 18 | - name: npm install, build, and test 19 | run: | 20 | yarn install --frozen-lockfile 21 | yarn build 22 | yarn test --silent --coverage 23 | yarn lint 24 | curl -Os https://uploader.codecov.io/latest/linux/codecov 25 | chmod +x codecov 26 | ./codecov -t ${{ secrets.CODECOV_GITHUB_TOKEN }} 27 | npx bundlesize 28 | env: 29 | CI: true 30 | -------------------------------------------------------------------------------- /src/examples/use-location-state/src/pages/test/__snapshots__/QueryStateTest.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`QueryStateDemo can set name with button 1`] = ` 4 |
7 | {
8 | "name": "Felix",
9 | "age": 25,
10 | "active": false,
11 | "date": "2019-01-01T00:00:00.000Z"
12 | }
13 |
14 | `;
15 |
16 | exports[`QueryStateDemo can set name with button 2`] = `
17 |
20 | {
21 | "name": "Kim",
22 | "age": 25,
23 | "active": false,
24 | "date": "2019-01-01T00:00:00.000Z"
25 | }
26 |
27 | `;
28 |
29 | exports[`QueryStateDemo can set name with button 3`] = `
30 |
33 | {
34 | "name": "Sarah",
35 | "age": 25,
36 | "active": false,
37 | "date": "2019-01-01T00:00:00.000Z"
38 | }
39 |
40 | `;
41 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/src/useQueryState/useQueryState.types.ts:
--------------------------------------------------------------------------------
1 | import { QueryStateMerge } from 'query-state-core'
2 |
3 | export type QueryString = string
4 |
5 | export type SetQueryStateFn
13 |
14 |
16 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/src/examples/use-location-state/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "01-simple",
3 | "version": "3.1.2",
4 | "private": true,
5 | "devDependencies": {
6 | "@types/react": "^16.8.8",
7 | "@types/react-dom": "^16.8.2",
8 | "add": "^2.0.6",
9 | "react-scripts": "^5.0.0",
10 | "sass": "^1.45.1",
11 | "typescript": "*"
12 | },
13 | "dependencies": {
14 | "@ungap/url-search-params": "^0.2.2",
15 | "react": "^17.0.2",
16 | "react-app-polyfill": "^1.0.0",
17 | "react-dom": "^17.0.2",
18 | "use-location-state": "^3.1.2"
19 | },
20 | "scripts": {
21 | "start": "react-scripts start",
22 | "build": "react-scripts build",
23 | "test": "echo \"Error: run tests from root\" && exit 1",
24 | "eject": "react-scripts eject"
25 | },
26 | "eslintConfig": {
27 | "extends": "react-app"
28 | },
29 | "browserslist": [
30 | ">0.2%",
31 | "not dead",
32 | "not ie <= 10",
33 | "not op_mini all"
34 | ]
35 | }
36 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/src/types/sharedTypes.ts:
--------------------------------------------------------------------------------
1 | // Since action _can_ be undefined, dispatch may be called without any parameters.
2 | // export type DispatchWithoutAction = () => void
3 | // Unlike redux, the actions _can_ be anything
4 | export type Reducer
20 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/src/examples/react-router-use-location-state/src/pages/ArrayDemo.tsx:
--------------------------------------------------------------------------------
1 | import React, { ChangeEventHandler } from 'react'
2 | import { useQueryState } from 'react-router-use-location-state'
3 |
4 | const defaultTags: string[] = []
5 |
6 | export default function ArrayDemo() {
7 | const [tags, setTags] = useQueryState('tags', defaultTags)
8 |
9 | const toggleTag: ChangeEventHandlerArray Demo
21 | 50 |
20 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/src/packages/react-router-use-location-state/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-router-use-location-state",
3 | "main": "dist/react-router-use-location-state.cjs.js",
4 | "module": "dist/react-router-use-location-state.esm.js",
5 | "types": "dist/react-router-use-location-state.d.ts",
6 | "description": "react hook to the browsers location query state",
7 | "peerDependencies": {
8 | "react": "^16.8.0 || ^17.0.2 || ^18.0.0",
9 | "react-router": "^6.0.2"
10 | },
11 | "dependencies": {
12 | "use-location-state": "^3.1.2"
13 | },
14 | "version": "3.1.2",
15 | "author": "Felix Leupold Array Demo
21 | 50 |
18 |
21 | 22 |
26 | 27 | 30 | 33 | 41 | 50 | 51 |
52 | 53 | 54 | Reset All (link) 55 | 56 |
57 | )
58 | }
59 |
--------------------------------------------------------------------------------
/src/packages/react-router-use-location-state/src/useLocationState/useReactRouterLocationStateInterface.ts:
--------------------------------------------------------------------------------
1 | import {
2 | GlobalLocationState,
3 | LOCATION_STATE_KEY,
4 | LocationStateInterface,
5 | } from 'use-location-state'
6 | import { useLocation, useNavigate } from 'react-router'
7 |
8 | // Needed for updates that happen right after each other (sync) as we do not have access to the latest history ref (since react router v6)
9 | let virtualState: GlobalLocationState | null = null
10 |
11 | export function useReactRouterLocationStateInterface():
12 | | LocationStateInterface
13 | | undefined {
14 | const location = useLocation()
15 | const navigate = useNavigate()
16 |
17 | // Use the real one again as soon as location changes and update was incorporated
18 | virtualState = null
19 |
20 | return {
21 | getLocationState: () => {
22 | const historyState =
23 | virtualState || (location.state as GlobalLocationState)
24 | return (
25 | (historyState &&
26 | LOCATION_STATE_KEY in historyState &&
27 | historyState[LOCATION_STATE_KEY]) ||
28 | {}
29 | )
30 | },
31 | setLocationState: (nextState, { method = 'replace' }) => {
32 | const historyState = (location.state || {}) as GlobalLocationState
33 | const updatedState = {
34 | ...historyState,
35 | [LOCATION_STATE_KEY]: nextState,
36 | }
37 |
38 | navigate(location, {
39 | state: updatedState,
40 | replace: method === 'replace',
41 | })
42 |
43 | virtualState = updatedState
44 | },
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/rollup.config.js:
--------------------------------------------------------------------------------
1 | import typescript from 'rollup-plugin-typescript2'
2 | import pkg from './package.json'
3 |
4 | const typescriptPluginOptions = {
5 | tsconfigOverride: {
6 | compilerOptions: {
7 | declaration: true,
8 | allowJs: false,
9 | isolatedModules: false,
10 | },
11 | },
12 | }
13 |
14 | export default [
15 | // CommonJS (for Node) and ES module (for bundlers) build
16 | {
17 | input: `src/${pkg.name}.ts`,
18 | external: [
19 | ...Object.keys(pkg.dependencies || {}),
20 | ...Object.keys(pkg.peerDependencies || {}),
21 | ],
22 | plugins: [
23 | typescript(typescriptPluginOptions), // so Rollup can convert TypeScript to JavaScript
24 | ],
25 | output: [
26 | { file: pkg.main, format: 'cjs' },
27 | { file: pkg.module, format: 'es' },
28 | ],
29 | },
30 | {
31 | input: `src/next.ts`,
32 | external: [
33 | ...Object.keys(pkg.dependencies || {}),
34 | ...Object.keys(pkg.peerDependencies || {}),
35 | 'next/router',
36 | ],
37 | plugins: [
38 | typescript(typescriptPluginOptions), // so Rollup can convert TypeScript to JavaScript
39 | ],
40 | output: [
41 | { file: 'dist/next.cjs.js', format: 'cjs' },
42 | { file: 'dist/next.esm.js', format: 'es' },
43 | ],
44 | },
45 | ]
46 |
47 | // rollup config with typescript was adopted from:
48 | // - https://github.com/rollup/rollup-starter-lib/blob/typescript/rollup.config.js
49 | // - https://hackernoon.com/building-and-publishing-a-module-with-typescript-and-rollup-js-faa778c85396
50 |
--------------------------------------------------------------------------------
/src/examples/nextjs/README.md:
--------------------------------------------------------------------------------
1 | # Hello World example
2 |
3 | This example shows the most basic idea behind Next. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities. The `day` directory shows that you can have subdirectories.
4 |
5 | ## Deploy your own
6 |
7 | Deploy the example using [Vercel](https://vercel.com):
8 |
9 | [](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/hello-world)
10 |
11 | ## How to use
12 |
13 | ### Using `create-next-app`
14 |
15 | Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
16 |
17 | ```bash
18 | npm init next-app --example hello-world hello-world-app
19 | # or
20 | yarn create next-app --example hello-world hello-world-app
21 | ```
22 |
23 | ### Download manually
24 |
25 | Download the example:
26 |
27 | ```bash
28 | curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/hello-world
29 | cd hello-world
30 | ```
31 |
32 | Install it and run:
33 |
34 | ```bash
35 | npm install
36 | npm run dev
37 | # or
38 | yarn
39 | yarn dev
40 | ```
41 |
42 | Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
43 |
--------------------------------------------------------------------------------
/src/examples/react-router-use-location-state/src/pages/test/ArrayDemo.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { act, cleanup, fireEvent, render } from '@testing-library/react'
3 | import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
4 | import ArrayDemo from '../ArrayDemo'
5 |
6 | const location = window.location
7 |
8 | // reset jest mocked hash
9 | beforeAll(() => {
10 | cleanup()
11 | })
12 |
13 | afterEach(() => {
14 | cleanup()
15 | window.history.replaceState(null, '', '/')
16 | })
17 |
18 | describe('ArrayDemo', () => {
19 | test('ArrayDemo renders without crash/loop', async () => {
20 | expect(
21 | render(
22 | Hello World.
19 | 20 |21 | 22 |
26 | 27 | 30 | 33 | 41 | 50 | 51 |
52 | 53 | 54 | Reset All (link) 55 | 56 |
58 |
81 | )
82 | }
83 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/src/useLocationState/useLocationStateInterface.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useState } from 'react'
2 | import {
3 | LOCATION_STATE_KEY,
4 | LocationStateInterface,
5 | } from './useLocationState.types'
6 |
7 | interface Props {
8 | disabled?: boolean
9 | }
10 |
11 | const hasWindowHistory = typeof window !== `undefined` && 'history' in window
12 |
13 | export default function useLocationStateInterface({
14 | disabled = false,
15 | }: Props = {}) {
16 | const enabled = !disabled && hasWindowHistory
17 |
18 | // this state is used to trigger re-renders
19 | const [, setR] = useState(0)
20 |
21 | const locationStateInterface: LocationStateInterface = useMemo(
22 | () => ({
23 | getLocationState: () => {
24 | if (!enabled) return {}
25 | const historyState = window.history.state
26 | return (
27 | (historyState &&
28 | LOCATION_STATE_KEY in historyState &&
29 | historyState[LOCATION_STATE_KEY]) ||
30 | {}
31 | )
32 | },
33 | setLocationState: (nextState, { method = 'replace' }) => {
34 | if (!enabled) return null
35 | const historyState = window.history.state || {}
36 | const updatedState = {
37 | ...historyState,
38 | [LOCATION_STATE_KEY]: nextState,
39 | }
40 |
41 | // update history state using replace / push
42 | window.history[method === 'replace' ? 'replaceState' : 'pushState'](
43 | updatedState,
44 | '',
45 | ''
46 | )
47 |
48 | // manually dispatch a hashchange event (replace state does not trigger this event)
49 | // so all subscribers get notified (old way for IE11)
50 | const customEvent = document.createEvent('CustomEvent')
51 | customEvent.initEvent('popstate', false, false)
52 | window.dispatchEvent(customEvent)
53 | },
54 | }),
55 | [enabled]
56 | )
57 |
58 | useEffect(() => {
59 | if (!enabled) return
60 | const popstateHandler = () => {
61 | setR((r) => r + 1)
62 | }
63 | window.addEventListener('popstate', popstateHandler, false)
64 | return () => window.removeEventListener('popstate', popstateHandler, false)
65 | }, [enabled])
66 |
67 | return locationStateInterface
68 | }
69 |
--------------------------------------------------------------------------------
/src/packages/query-state-core/test/parseQueryStateValue.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | EMPTY_ARRAY_STRING,
3 | parseQueryStateValue,
4 | toQueryStateValue,
5 | } from '../src/query-state-core'
6 |
7 | describe.each`
8 | value | defaultValue | parsedValue
9 | ${EMPTY_ARRAY_STRING} | ${['abc']} | ${[]}
10 | ${EMPTY_ARRAY_STRING} | ${['']} | ${[]}
11 | ${EMPTY_ARRAY_STRING} | ${[]} | ${[]}
12 | ${''} | ${[]} | ${['']}
13 | ${undefined} | ${''} | ${null}
14 | ${'0'} | ${0} | ${0}
15 | ${'0'} | ${100} | ${0}
16 | ${'true'} | ${false} | ${true}
17 | ${'true'} | ${true} | ${true}
18 | ${'false'} | ${false} | ${false}
19 | ${'false'} | ${true} | ${false}
20 | ${'Text'} | ${true} | ${null}
21 | ${'Text, Text'} | ${'Text'} | ${'Text, Text'}
22 | ${'2019-01-01'} | ${new Date()} | ${new Date('2019-01-01')}
23 | ${'xxx'} | ${new Date()} | ${null}
24 | ${() => void 0} | ${'Text'} | ${null}
25 | `(
26 | 'parseQueryStateValue value $value, defaultValue $defaultValue',
27 | ({ value, defaultValue, parsedValue }) => {
28 | test(`should return value transformed into correct type or null (invalid transform)`, () => {
29 | expect(parseQueryStateValue(value, defaultValue)).toEqual(parsedValue)
30 | })
31 | }
32 | )
33 |
34 | describe.each`
35 | value | stateValue
36 | ${'Text'} | ${'Text'}
37 | ${10} | ${'10'}
38 | ${NaN} | ${null}
39 | ${true} | ${'true'}
40 | ${false} | ${'false'}
41 | ${[]} | ${[]}
42 | ${['Text']} | ${['Text']}
43 | ${['Just', 'Text']} | ${['Just', 'Text']}
44 | ${Symbol('Any')} | ${null}
45 | ${new Date('2019-01-01')} | ${'2019-01-01T00:00:00.000Z'}
46 | ${new Date('xxx')} | ${null}
47 | `(
48 | 'toQueryStateValue value $value, stateValue $stateValue',
49 | ({ value, stateValue }) => {
50 | test(`should return value transformed into string or array of strings (or null when not possible)`, () => {
51 | expect(toQueryStateValue(value)).toEqual(stateValue)
52 | })
53 | }
54 | )
55 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/src/useQueryState/test/useQueryStateObj.test.ts:
--------------------------------------------------------------------------------
1 | import { cleanup } from '@testing-library/react'
2 | import { act, renderHook } from '@testing-library/react-hooks'
3 | import { useHashQueryStateObj } from '../useHashQueryState'
4 | import { useHashQueryStringInterface } from '../useHashQueryStringInterface'
5 | import { useQueryStateObj } from '../useQueryStateObj'
6 | import { unwrapResult } from 'use-location-state-test-helpers/test-helpers'
7 |
8 | // reset jest mocked hash
9 | beforeAll(() => {
10 | window.location.hash = ''
11 | })
12 |
13 | afterEach(() => {
14 | window.location.hash = ''
15 | cleanup()
16 | })
17 |
18 | describe('useQueryStateObj hook', () => {
19 | it('should work with passed HashQueryStringInterface', async () => {
20 | const { result, unmount } = renderHook(
21 | (props) => {
22 | const hashQSI = useHashQueryStringInterface()
23 | return useQueryStateObj(props, { queryStringInterface: hashQSI })
24 | },
25 | {
26 | initialProps: { name: 'Sarah' },
27 | }
28 | )
29 |
30 | const name = unwrapResult(result)
31 |
32 | expect(name.value).toEqual({ name: 'Sarah' })
33 | await act(async () => name.setValue({ name: 'Kim' }))
34 | expect(window.location.hash).toEqual('#name=Kim')
35 | expect(name.value).toEqual({ name: 'Kim' })
36 | await act(async () => name.setValue({ name: 'Sarah' }))
37 | expect(window.location.hash).toEqual('')
38 | expect(name.value).toEqual({ name: 'Sarah' })
39 | act(() => void unmount())
40 | })
41 | })
42 |
43 | describe('useHashQueryStateObj hook', () => {
44 | it('should work with internal HashQueryStringInterface', async () => {
45 | const { result, unmount } = renderHook(
46 | (props) => useHashQueryStateObj(props),
47 | {
48 | initialProps: { name: 'Sarah' },
49 | }
50 | )
51 |
52 | const name = unwrapResult(result)
53 |
54 | expect(name.value).toEqual({ name: 'Sarah' })
55 | await act(async () => name.setValue({ name: 'Kim' }))
56 | expect(window.location.hash).toEqual('#name=Kim')
57 | expect(name.value).toEqual({ name: 'Kim' })
58 | await act(async () => name.setValue({ name: 'Sarah' }))
59 | expect(window.location.hash).toEqual('')
60 | expect(name.value).toEqual({ name: 'Sarah' })
61 | act(() => void unmount())
62 | })
63 | })
64 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "location-state-monorepo",
3 | "private": true,
4 | "workspaces": [
5 | "src/packages/*",
6 | "src/helpers/*",
7 | "src/examples/**/*"
8 | ],
9 | "devDependencies": {
10 | "@testing-library/react": "^12.1.2",
11 | "@testing-library/react-hooks": "^8.0.0",
12 | "@types/jest": "^29.0.0",
13 | "@types/jsdom": "^21.1.0",
14 | "@types/react-test-renderer": "^18.0.0",
15 | "bundlesize": "^0.18.0",
16 | "codecov": "^3.6.1",
17 | "commitizen": "^4.0.3",
18 | "copyfiles": "2.4.1",
19 | "cz-conventional-changelog": "^3.0.2",
20 | "eslint-config-prettier": "^8.1.0",
21 | "eslint-plugin-prettier": "^4.0.0",
22 | "eslint-plugin-react": "^7.16.0",
23 | "husky": "^8.0.1",
24 | "lerna": "^6.0.0",
25 | "prettier": "^2.0.5",
26 | "pretty-quick": "^3.1.1",
27 | "react": "^17.0.2",
28 | "react-dom": "^17.0.2",
29 | "react-scripts": "^5.0.0",
30 | "react-test-renderer": "^17.0.2",
31 | "rollup": "^2.0.0",
32 | "rollup-plugin-typescript2": "0.34.1",
33 | "tslib": "^2.0.0",
34 | "typescript": "^5.0.2",
35 | "use-location-state-test-helpers": "*"
36 | },
37 | "scripts": {
38 | "commit": "git-cz",
39 | "start": "yarn dev",
40 | "dev": "yarn build; yarn lerna run dev --parallel",
41 | "build": "yarn copy:readme; yarn lerna run build",
42 | "test": "react-scripts test",
43 | "lint": "prettier --check 'src/**/*.{js,ts,tsx}'",
44 | "prettier": "prettier --write 'src/**/*.{js,ts,tsx}'",
45 | "copy:readme": "npx copyfiles README.md src/packages/use-location-state/; npx copyfiles README.md src/packages/react-router-use-location-state/",
46 | "prepare": "husky install"
47 | },
48 | "version": "0.0.0-development",
49 | "repository": {
50 | "type": "git",
51 | "url": "https://github.com/xiel/use-location-state.git"
52 | },
53 | "config": {
54 | "commitizen": {
55 | "path": "node_modules/cz-conventional-changelog"
56 | }
57 | },
58 | "bundlesize": [
59 | {
60 | "path": "./src/packages/*/dist/*.js",
61 | "maxSize": "5 kB"
62 | }
63 | ],
64 | "jest": {
65 | "collectCoverageFrom": [
66 | "src/packages/**/*.{js,jx,tsx,ts}",
67 | "!**/node_modules/**",
68 | "!**/dist/**",
69 | "!**/build/**",
70 | "!**/*.config.{js,jx,tsx,ts}"
71 | ]
72 | },
73 | "dependencies": {}
74 | }
75 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/src/useLocationState/test/useLocationState.test.ts:
--------------------------------------------------------------------------------
1 | import { act, renderHook } from '@testing-library/react-hooks'
2 | import { useLocationState } from '../../use-location-state'
3 | import {
4 | asyncAct,
5 | unwrapABResult,
6 | } from 'use-location-state-test-helpers/test-helpers'
7 |
8 | describe('useLocationState', () => {
9 | it('should keep to useLocationState hooks with the same name in sync', async () => {
10 | act(() => window.history.replaceState({}, '', ''))
11 | const { result, unmount } = renderHook(() => {
12 | const a = useLocationState('item', 'Sarah')
13 | const b = useLocationState('item', '')
14 | return { a, b }
15 | })
16 |
17 | const { a, b } = unwrapABResult(result)
18 |
19 | expect(a.value).toEqual('Sarah')
20 | expect(b.value).toEqual('')
21 |
22 | await asyncAct(async () => void a.setValue('Kim'))
23 |
24 | expect(a.value).toEqual('Kim')
25 | expect(b.value).toEqual('Kim')
26 |
27 | act(() => void unmount())
28 | })
29 |
30 | it('should call set function with current value', async () => {
31 | act(() => window.history.replaceState({}, '', ''))
32 | const { result, unmount } = renderHook(() => {
33 | const a = useLocationState('item', 'Kim')
34 | const b = useLocationState('item', '')
35 | return { a, b }
36 | })
37 |
38 | const { a, b } = unwrapABResult(result)
39 |
40 | expect(a.value).toEqual('Kim')
41 | expect(b.value).toEqual('')
42 |
43 | await asyncAct(async () =>
44 | a.setValue((currentValue) => currentValue + 'berly')
45 | )
46 |
47 | expect(a.value).toEqual('Kimberly')
48 | expect(b.value).toEqual('Kimberly')
49 |
50 | act(() => void unmount())
51 | })
52 |
53 | it('should call set function with current value - array', async () => {
54 | act(() => window.history.replaceState({}, '', ''))
55 | const { result, unmount } = renderHook(() => {
56 | const a = useLocationState('arr', [1, 2, 3])
57 | const b = useLocationState('arr', [])
58 | return { a, b }
59 | })
60 |
61 | const { a, b } = unwrapABResult(result)
62 |
63 | expect(a.value).toEqual([1, 2, 3])
64 | expect(b.value).toEqual([])
65 |
66 | await asyncAct(async () => a.setValue((arr) => arr.concat(4, 5, 6)))
67 |
68 | expect(a.value).toEqual([1, 2, 3, 4, 5, 6])
69 | expect(b.value).toEqual([1, 2, 3, 4, 5, 6])
70 |
71 | act(() => void unmount())
72 | })
73 | })
74 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/src/useLocationState/test/invalid-values.test.ts:
--------------------------------------------------------------------------------
1 | import { act, renderHook } from '@testing-library/react-hooks'
2 | import { useLocationState } from '../../use-location-state'
3 | import { unwrapABResult } from 'use-location-state-test-helpers/test-helpers'
4 |
5 | describe('invalid input defaultValue', () => {
6 | describe.each`
7 | defaultValue
8 | ${Symbol('Test')}
9 | ${() => () => 'function returning a function'}
10 | `('defaultValue $defaultValue', ({ defaultValue }) => {
11 | test(`should throw`, () => {
12 | // reset state
13 | act(() => window.history.replaceState({}, '', ''))
14 |
15 | const replaceState = jest.spyOn(window.history, 'replaceState')
16 | const { result, unmount } = renderHook(() =>
17 | useLocationState('anything', defaultValue)
18 | )
19 |
20 | expect(result.error).toMatchInlineSnapshot(
21 | `[Error: unsupported defaultValue]`
22 | )
23 | expect(replaceState).toHaveBeenCalledTimes(0)
24 |
25 | // restore mock
26 | replaceState.mockRestore()
27 | act(() => void unmount())
28 | })
29 | })
30 | })
31 |
32 | describe('invalid value in setter', () => {
33 | describe.each`
34 | invalidValueToSet
35 | ${Symbol('Test')}
36 | ${() => () => 'function returning a function'}
37 | ${() => Symbol('InFunc')}
38 | `('invalidValueToSet $invalidValueToSet', ({ invalidValueToSet }) => {
39 | test(`should throw`, async () => {
40 | // reset state and spy
41 | act(() => window.history.replaceState({}, '', ''))
42 | const warn = jest.spyOn(console, 'warn').mockImplementation()
43 |
44 | const { result, unmount } = renderHook(() => {
45 | const a = useLocationState('itemName', 'valid default value')
46 | const b = useLocationState('itemName', '')
47 | return { a, b }
48 | })
49 |
50 | const { a, b } = unwrapABResult(result)
51 |
52 | expect(result.error).toBe(undefined)
53 | expect(a.value).toBe('valid default value')
54 |
55 | await act(async () => a.setValue('new value'))
56 | expect(a.value).toBe('new value')
57 | expect(b.value).toBe('new value')
58 |
59 | // calling setter with an invalid value will reset the state to the default value
60 | await act(async () => a.setValue(invalidValueToSet))
61 | expect(a.value).toBe('valid default value')
62 | expect(b.value).toBe('')
63 |
64 | expect(warn).toHaveBeenCalledTimes(1)
65 | warn.mockRestore()
66 | await act(async () => void unmount())
67 | })
68 | })
69 | })
70 |
--------------------------------------------------------------------------------
/src/examples/react-router-use-location-state/src/pages/QueryReducer/FilterDisplay.tsx:
--------------------------------------------------------------------------------
1 | import { FilterKeys } from './filterReducer'
2 | import { Filter, FilterDisplayProps } from './QueryReducerTypes'
3 | import React, { useLayoutEffect, useMemo, useRef } from 'react'
4 |
5 | const emptySubFilters: Filter[] = []
6 |
7 | function getFilterKeysFlat(filter: Filter): FilterKeys {
8 | return Object.freeze(
9 | ([] as FilterKeys).concat(
10 | 'subFilters' in filter
11 | ? filter.subFilters.flatMap(getFilterKeysFlat)
12 | : filter.filterKey
13 | )
14 | )
15 | }
16 |
17 | export function FilterDisplay(props: FilterDisplayProps) {
18 | const { activeFilters, filtersDispatch } = props
19 | const label = 'title' in props ? props.title : props.filterKey
20 | const subFilters = 'subFilters' in props ? props.subFilters : emptySubFilters
21 | const filterKeysInTree = useMemo(() => getFilterKeysFlat(props), [props])
22 | const activeFilterKeysInTree = useMemo(
23 | () => filterKeysInTree.filter((fK) => activeFilters.includes(fK)),
24 | [activeFilters, filterKeysInTree]
25 | )
26 | const checkboxRef = useRefuseQueryReducer Demo
59 |
60 |
79 |
80 |
53 |
62 | {subFilters?.length && isActive ? (
63 |
75 | )
76 | }
77 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/src/useLocationState/test/valid-values.test.ts:
--------------------------------------------------------------------------------
1 | import { act, renderHook } from '@testing-library/react-hooks'
2 | import { useLocationState } from '../../use-location-state'
3 | import { unwrapABResult } from 'use-location-state-test-helpers/test-helpers'
4 |
5 | describe.each`
6 | defaultValue | newValue
7 | ${'not empty'} | ${''}
8 | ${'not empty'} | ${'still not empty'}
9 | ${''} | ${'not empty anymore'}
10 | ${[]} | ${['new', 'entries']}
11 | ${['']} | ${['new', 'entries']}
12 | ${['same', 'entries']} | ${['same', 'entries']}
13 | ${[]} | ${[]}
14 | ${['multiple', 'strings']} | ${[]}
15 | ${['multiple', 'strings']} | ${['']}
16 | ${['multiple', 'strings']} | ${['just one entry']}
17 | ${new Date()} | ${new Date(0)}
18 | ${0} | ${-50}
19 | ${99} | ${3.14}
20 | ${Infinity} | ${-Infinity}
21 | ${1e23} | ${1e24}
22 | ${true} | ${false}
23 | ${true} | ${true}
24 | ${false} | ${true}
25 | ${false} | ${false}
26 | ${null} | ${true}
27 | ${undefined} | ${true}
28 | ${{ testObj: 1 }} | ${{ testObj: 5 }}
29 | ${[1, 2, 3]} | ${[4, 5, 6]}
30 | `(
31 | 'defaultValue: $defaultValue, newValue: $newValue',
32 | ({ defaultValue = '', newValue }) => {
33 | test(`should return default value and set newValue successfully`, () => {
34 | act(() => window.history.replaceState({}, '', ''))
35 | const { result, unmount } = renderHook(() => {
36 | const a = useLocationState('item', defaultValue)
37 | const b = useLocationState('item', defaultValue)
38 | return { a, b }
39 | })
40 |
41 | const { a, b } = unwrapABResult(result)
42 |
43 | // default
44 | expect(result.error).toBe(undefined)
45 | expect(window.history.state).toEqual({})
46 | expect(a.value).toEqual(defaultValue)
47 | expect(b.value).toEqual(defaultValue)
48 |
49 | // new value
50 | act(() => a.setValue(newValue))
51 | expect(a.value).toEqual(newValue)
52 | expect(b.value).toEqual(newValue)
53 |
54 | // // back to default
55 | act(() => a.setValue(defaultValue))
56 | expect(a.value).toEqual(defaultValue)
57 | expect(b.value).toEqual(defaultValue)
58 | expect(window.history.state).toEqual({ __useLocationState: {} })
59 |
60 | act(() => void unmount())
61 | })
62 | }
63 | )
64 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/src/useQueryState/useQueryStateObj.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
2 | import {
3 | createMergedQuery,
4 | parseQueryState,
5 | QueryState,
6 | QueryStateMerge,
7 | } from 'query-state-core'
8 | import { useHashQueryStringInterface } from './useHashQueryStringInterface'
9 | import { QueryStateOpts, SetQueryStateFn } from './useQueryState.types'
10 |
11 | export function useQueryStateObj-
64 | {subFilters.map((filter) => (
65 |
12 |
115 | )
116 | }
117 |
--------------------------------------------------------------------------------
/src/examples/react-router-use-location-state/src/pages/LocationStateDemo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useLocationState } from 'react-router-use-location-state'
3 | import QueryStateDisplay from '../components/QueryStateDisplay'
4 |
5 | export default function LocationStateDemo() {
6 | const [name, setName] = useLocationState('name', 'Sarah')
7 | const [age, setAge] = useLocationState('age', 25)
8 | const [active, setActive] = useLocationState('active', false)
9 |
10 | return (
11 | Intro
13 |name
21 |22 | 25 | 28 | 31 | {name !== 'Sarah' && ( 32 | 35 | )} 36 | 37 | setName(e.target.value)} 42 | /> 43 |
44 |Age
45 |46 | 49 | 52 | 55 | 56 | setAge(Number(e.target.value))} 61 | /> 62 |
63 |name & age
64 |65 | 74 | 83 | 92 |
93 | 114 |
12 |
114 | )
115 | }
116 |
--------------------------------------------------------------------------------
/src/examples/use-location-state/src/pages/QueryStateDemo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useQueryState } from 'use-location-state'
3 | import QueryStateDisplay from '../components/QueryStateDisplay'
4 | import QueryStateCheckbox from '../components/QueryStateCheckbox'
5 |
6 | export default function QueryStateDemo() {
7 | const [name, setName] = useQueryState('name', 'Sarah')
8 | const [age, setAge] = useQueryState('age', 25)
9 | const [date, setDate] = useQueryState('date', new Date('2019-01-01'))
10 | const [active] = useQueryState('active', false)
11 |
12 | return (
13 | Intro
13 |14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid 15 | architecto, atque, corporis debitis esse. 16 |
17 |name
25 |26 | 29 | 32 | 35 | 36 | setName(e.target.value)} 41 | /> 42 |
43 |Age
44 |45 | 48 | 51 | 54 | 55 | setAge(Number(e.target.value))} 60 | /> 61 |
62 |name & age
63 |64 | 73 | 82 | 91 |
92 | 113 |
14 |
118 | )
119 | }
120 |
--------------------------------------------------------------------------------
/src/examples/use-location-state/src/pages/LocationStateDemo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useLocationState } from 'use-location-state'
3 | import QueryStateDisplay from '../components/QueryStateDisplay'
4 | import LocationStateCheckbox from '../components/LocationStateCheckbox'
5 |
6 | export default function LocationStateDemo() {
7 | const [name, setName] = useLocationState('name', 'Sarah')
8 | const [age, setAge] = useLocationState('age', 25)
9 | const [date, setDate] = useLocationStateIntro
15 | 16 |name
26 | 49 | 50 |Age
51 | 69 | 70 |name & age (at the same time)
71 | 100 | 101 |active
102 | 106 | 107 |Date
108 | 117 |
17 |
122 | )
123 | }
124 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/src/useQueryState/test/useHashQueryState.test.ts:
--------------------------------------------------------------------------------
1 | import { cleanup } from '@testing-library/react'
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { useHashQueryState } from '../../use-location-state'
4 | import {
5 | asyncAct,
6 | unwrapABResult,
7 | } from 'use-location-state-test-helpers/test-helpers'
8 |
9 | // reset jest mocked hash
10 | beforeAll(() => {
11 | window.location.hash = ''
12 | })
13 |
14 | beforeEach(() => {
15 | window.location.hash = ''
16 | cleanup()
17 | })
18 |
19 | afterAll(() => {
20 | window.location.hash = ''
21 | })
22 |
23 | describe('useHashQueryState', () => {
24 | it('should work with internal HashQueryStringInterface', async () => {
25 | const { result, unmount } = renderHook(
26 | ({ itemName, defaultValue }) => useHashQueryState(itemName, defaultValue),
27 | {
28 | initialProps: { itemName: 'name', defaultValue: 'Sarah' },
29 | }
30 | )
31 | const val = () => result.current[0]
32 | const setVal: typeof result.current[1] = (newValue) =>
33 | result.current[1](newValue)
34 |
35 | expect(val()).toEqual('Sarah')
36 |
37 | await asyncAct(async () => setVal('Kim'))
38 |
39 | expect(window.location.hash).toEqual('#name=Kim')
40 | expect(val()).toEqual('Kim')
41 | unmount()
42 | })
43 |
44 | it('should reset hash when default', async () => {
45 | const { result, unmount } = renderHook(
46 | ({ itemName, defaultValue }) => useHashQueryState(itemName, defaultValue),
47 | {
48 | initialProps: { itemName: 'name', defaultValue: 'Sarah' },
49 | }
50 | )
51 | const val = () => result.current[0]
52 | const setVal: typeof result.current[1] = (newValue) =>
53 | result.current[1](newValue)
54 |
55 | expect(val()).toEqual('Sarah')
56 | await asyncAct(async () => void setVal('Kim'))
57 |
58 | expect(window.location.hash).toEqual('#name=Kim')
59 | expect(val()).toEqual('Kim')
60 |
61 | await asyncAct(() => void setVal('Sarah'))
62 |
63 | expect(window.location.hash).toEqual('')
64 | expect(val()).toEqual('Sarah')
65 | unmount()
66 | })
67 |
68 | it('should enforce types with same item name', async () => {
69 | // two hooks use the same itemName -> they should still get the value in their correct type if possible (otherwise their own defaultValue)
70 | const { result, unmount } = renderHook(
71 | ({ itemName, defaultValueNum, defaultValueStr }) => {
72 | // a = num
73 | const a = useHashQueryState(itemName, defaultValueNum)
74 | // b = str
75 | const b = useHashQueryState(itemName, defaultValueStr)
76 | return { a, b }
77 | },
78 | {
79 | initialProps: {
80 | itemName: 'name',
81 | defaultValueNum: 25,
82 | defaultValueStr: 'Sarah',
83 | },
84 | }
85 | )
86 |
87 | const { a: num, b: str } = unwrapABResult(result)
88 |
89 | // initially both should show their defaults
90 | expect(window.location.hash).toEqual('')
91 | expect(str.value).toEqual('Sarah')
92 | expect(num.value).toEqual(25)
93 |
94 | // after setting a string value for same item,
95 | // numerical QS should still return default number, because string "Kim" cannot be transformed into a number
96 | await asyncAct(async () => str.setValue('Kim'))
97 |
98 | expect(window.location.hash).toEqual('#name=Kim')
99 | expect(str.value).toEqual('Kim')
100 | expect(num.value).toEqual(25)
101 |
102 | await asyncAct(async () => str.setValue('Tom'))
103 |
104 | expect(window.location.hash).toEqual('#name=Tom')
105 | expect(str.value).toEqual('Tom')
106 | expect(num.value).toEqual(25)
107 |
108 | // string QS should return number as string, after setting it via numerical setter
109 | await asyncAct(async () => num.setValue(375))
110 | expect(window.location.hash).toEqual('#name=375')
111 | expect(num.value).toEqual(375)
112 | expect(str.value).toEqual('375')
113 |
114 | unmount()
115 | })
116 | })
117 |
--------------------------------------------------------------------------------
/src/packages/query-state-core/src/query-state-core.ts:
--------------------------------------------------------------------------------
1 | export type ValueType = string | string[] | number | boolean | Date
2 | export type QueryStateValue = string | string[]
3 | export type QueryStateResetValue = null | undefined
4 | export type QueryState = RecorduseLocationState Demo
18 | 19 |name
29 | 47 | 48 |Age
49 | 67 | 68 |name & age (at the same time)
69 | 98 | 99 |active
100 | 104 | 105 |Date
106 | 121 |
7 | {
8 | "name": "Sarah",
9 | "age": 25,
10 | "active": true,
11 | "date": "2019-01-01T00:00:00.000Z"
12 | }
13 |
14 | `;
15 |
16 | exports[`LocationStateDemo can set active with checkbox 1`] = `
17 |
20 | {
21 | "name": "Sarah",
22 | "age": 25,
23 | "active": true,
24 | "date": "2019-01-01T00:00:00.000Z"
25 | }
26 |
27 | `;
28 |
29 | exports[`LocationStateDemo can set age with button 1`] = `
30 |
33 | {
34 | "name": "Sarah",
35 | "age": 30,
36 | "active": false,
37 | "date": "2019-01-01T00:00:00.000Z"
38 | }
39 |
40 | `;
41 |
42 | exports[`LocationStateDemo can set age with button 2`] = `
43 |
46 | {
47 | "name": "Sarah",
48 | "age": 45,
49 | "active": false,
50 | "date": "2019-01-01T00:00:00.000Z"
51 | }
52 |
53 | `;
54 |
55 | exports[`LocationStateDemo can set age with button 3`] = `
56 |
59 | {
60 | "name": "Sarah",
61 | "age": 25,
62 | "active": false,
63 | "date": "2019-01-01T00:00:00.000Z"
64 | }
65 |
66 | `;
67 |
68 | exports[`LocationStateDemo can set age with text field 1`] = `
69 |
72 | {
73 | "name": "Sarah",
74 | "age": 33,
75 | "active": false,
76 | "date": "2019-01-01T00:00:00.000Z"
77 | }
78 |
79 | `;
80 |
81 | exports[`LocationStateDemo can set date with date field 1`] = `
82 |
85 | {
86 | "name": "Sarah",
87 | "age": 25,
88 | "active": false,
89 | "date": "2019-05-01T00:00:00.000Z"
90 | }
91 |
92 | `;
93 |
94 | exports[`LocationStateDemo can set name & age with button 1`] = `
95 |
98 | {
99 | "name": "Felix",
100 | "age": 30,
101 | "active": false,
102 | "date": "2019-01-01T00:00:00.000Z"
103 | }
104 |
105 | `;
106 |
107 | exports[`LocationStateDemo can set name & age with button 2`] = `
108 |
111 | {
112 | "name": "Kim",
113 | "age": 45,
114 | "active": false,
115 | "date": "2019-01-01T00:00:00.000Z"
116 | }
117 |
118 | `;
119 |
120 | exports[`LocationStateDemo can set name & age with button 3`] = `
121 |
124 | {
125 | "name": "Sarah",
126 | "age": 25,
127 | "active": false,
128 | "date": "2019-01-01T00:00:00.000Z"
129 | }
130 |
131 | `;
132 |
133 | exports[`LocationStateDemo can set name with button 1`] = `
134 |
137 | {
138 | "name": "Felix",
139 | "age": 25,
140 | "active": false,
141 | "date": "2019-01-01T00:00:00.000Z"
142 | }
143 |
144 | `;
145 |
146 | exports[`LocationStateDemo can set name with button 2`] = `
147 |
150 | {
151 | "name": "Kim",
152 | "age": 25,
153 | "active": false,
154 | "date": "2019-01-01T00:00:00.000Z"
155 | }
156 |
157 | `;
158 |
159 | exports[`LocationStateDemo can set name with button 3`] = `
160 |
163 | {
164 | "name": "Sarah",
165 | "age": 25,
166 | "active": false,
167 | "date": "2019-01-01T00:00:00.000Z"
168 | }
169 |
170 | `;
171 |
172 | exports[`LocationStateDemo can set name with text field 1`] = `
173 |
176 | {
177 | "name": "Mila",
178 | "age": 25,
179 | "active": false,
180 | "date": "2019-01-01T00:00:00.000Z"
181 | }
182 |
183 | `;
184 |
185 | exports[`LocationStateDemo can set null in date field 1`] = `
186 |
189 | {
190 | "name": "Sarah",
191 | "age": 25,
192 | "active": false,
193 | "date": null
194 | }
195 |
196 | `;
197 |
198 | exports[`LocationStateDemo can set null in date field 2`] = `
199 |
202 | {
203 | "name": "Sarah",
204 | "age": 25,
205 | "active": false,
206 | "date": null
207 | }
208 |
209 | `;
210 |
--------------------------------------------------------------------------------
/src/examples/react-router-use-location-state/src/pages/test/__snapshots__/LocationStateTest.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`LocationStateDemo can set active with checkbox - push 1`] = `
4 |
7 | {
8 | "name": "Sarah",
9 | "age": 25,
10 | "active": false
11 | }
12 |
13 | `;
14 |
15 | exports[`LocationStateDemo can set active with checkbox 1`] = `
16 |
19 | {
20 | "name": "Sarah",
21 | "age": 25,
22 | "active": false
23 | }
24 |
25 | `;
26 |
27 | exports[`LocationStateDemo can set active with checkbox 2`] = `
28 |
31 | {
32 | "name": "Sarah",
33 | "age": 25,
34 | "active": true
35 | }
36 |
37 | `;
38 |
39 | exports[`LocationStateDemo can set age with button 1`] = `
40 |
43 | {
44 | "name": "Sarah",
45 | "age": 25,
46 | "active": false
47 | }
48 |
49 | `;
50 |
51 | exports[`LocationStateDemo can set age with button 2`] = `
52 |
55 | {
56 | "name": "Sarah",
57 | "age": 30,
58 | "active": false
59 | }
60 |
61 | `;
62 |
63 | exports[`LocationStateDemo can set age with button 3`] = `
64 |
67 | {
68 | "name": "Sarah",
69 | "age": 45,
70 | "active": false
71 | }
72 |
73 | `;
74 |
75 | exports[`LocationStateDemo can set age with button 4`] = `
76 |
79 | {
80 | "name": "Sarah",
81 | "age": 25,
82 | "active": false
83 | }
84 |
85 | `;
86 |
87 | exports[`LocationStateDemo can set age with text field 1`] = `
88 |
91 | {
92 | "name": "Sarah",
93 | "age": 25,
94 | "active": false
95 | }
96 |
97 | `;
98 |
99 | exports[`LocationStateDemo can set age with text field 2`] = `
100 |
103 | {
104 | "name": "Sarah",
105 | "age": 33,
106 | "active": false
107 | }
108 |
109 | `;
110 |
111 | exports[`LocationStateDemo can set name & age with button 1`] = `
112 |
115 | {
116 | "name": "Sarah",
117 | "age": 25,
118 | "active": false
119 | }
120 |
121 | `;
122 |
123 | exports[`LocationStateDemo can set name & age with button 2`] = `
124 |
127 | {
128 | "name": "Felix",
129 | "age": 30,
130 | "active": false
131 | }
132 |
133 | `;
134 |
135 | exports[`LocationStateDemo can set name & age with button 3`] = `
136 |
139 | {
140 | "name": "Kim",
141 | "age": 45,
142 | "active": false
143 | }
144 |
145 | `;
146 |
147 | exports[`LocationStateDemo can set name & age with button 4`] = `
148 |
151 | {
152 | "name": "Sarah",
153 | "age": 25,
154 | "active": false
155 | }
156 |
157 | `;
158 |
159 | exports[`LocationStateDemo can set name with button 1`] = `
160 |
163 | {
164 | "name": "Sarah",
165 | "age": 25,
166 | "active": false
167 | }
168 |
169 | `;
170 |
171 | exports[`LocationStateDemo can set name with button 2`] = `
172 |
175 | {
176 | "name": "Felix",
177 | "age": 25,
178 | "active": false
179 | }
180 |
181 | `;
182 |
183 | exports[`LocationStateDemo can set name with button 3`] = `
184 |
187 | {
188 | "name": "Kim",
189 | "age": 25,
190 | "active": false
191 | }
192 |
193 | `;
194 |
195 | exports[`LocationStateDemo can set name with button 4`] = `
196 |
199 | {
200 | "name": "Sarah",
201 | "age": 25,
202 | "active": false
203 | }
204 |
205 | `;
206 |
207 | exports[`LocationStateDemo can set name with text field 1`] = `
208 |
211 | {
212 | "name": "Sarah",
213 | "age": 25,
214 | "active": false
215 | }
216 |
217 | `;
218 |
219 | exports[`LocationStateDemo can set name with text field 2`] = `
220 |
223 | {
224 | "name": "Mila",
225 | "age": 25,
226 | "active": false
227 | }
228 |
229 | `;
230 |
--------------------------------------------------------------------------------
/src/packages/query-state-core/test/query-state-core.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | createMergedQuery,
3 | EMPTY_ARRAY_STRING,
4 | parseQueryState,
5 | } from '../src/query-state-core'
6 |
7 | describe('parseQueryState parses', () => {
8 | it('empty string', () => {
9 | expect(parseQueryState('')).toEqual(null)
10 | })
11 |
12 | it('question mark string', () => {
13 | expect(parseQueryState('?')).toEqual(null)
14 | })
15 |
16 | it('query string with one parameter', () => {
17 | expect(parseQueryState('a=abc')).toEqual({ a: 'abc' })
18 | })
19 |
20 | it('query string with multiple parameters', () => {
21 | expect(parseQueryState('a=abc&d=efg')).toEqual({ a: 'abc', d: 'efg' })
22 | })
23 |
24 | it('query string with multiple parameters with the same name as array', () => {
25 | expect(parseQueryState('a=abc&a=efg')).toEqual({ a: ['abc', 'efg'] })
26 | })
27 |
28 | it('creates array from query string with multiple value values for same key', () => {
29 | expect(parseQueryState('filters=1&filters=2&filters=3')).toEqual({
30 | filters: ['1', '2', '3'],
31 | })
32 | })
33 |
34 | it('query string with "true" boolean parameter', () => {
35 | expect(parseQueryState('a=true')).toEqual({ a: 'true' })
36 | })
37 |
38 | it('query string with two boolean parameters', () => {
39 | expect(parseQueryState('b=false&c=true')).toEqual({ c: 'true', b: 'false' })
40 | })
41 |
42 | it('query string with parameter value containing spaces', () => {
43 | expect(parseQueryState('param=with%20space%20between')).toEqual({
44 | param: 'with space between',
45 | })
46 | })
47 |
48 | it('query string with invalid keys should be ignored', () => {
49 | const warnSpy = jest.spyOn(console, 'warn').mockImplementation()
50 | expect(parseQueryState('toString=true&valid=value&__proto__=true')).toEqual(
51 | { valid: 'value' }
52 | )
53 | expect(warnSpy).toHaveBeenCalledTimes(2)
54 | warnSpy.mockRestore()
55 | })
56 | })
57 |
58 | describe('createMergedQuery', () => {
59 | it('overwrites same keys with later value', () => {
60 | expect(createMergedQuery({ a: 'b' })).toEqual('a=b')
61 | })
62 |
63 | it('overwrites same keys with later value', () => {
64 | expect(createMergedQuery({ a: 'b' }, { a: 'c' })).toEqual('a=c')
65 | })
66 |
67 | it('stable sort keys', () => {
68 | const abcQueryString = 'a=true&b=true&c=true'
69 | expect(
70 | createMergedQuery({ a: 'true' }, { b: 'true' }, { c: 'true' })
71 | ).toEqual(abcQueryString)
72 | expect(
73 | createMergedQuery({ c: 'true' }, { a: 'true' }, { b: 'true' })
74 | ).toEqual(abcQueryString)
75 | expect(
76 | createMergedQuery({ b: 'true' }, { c: 'true' }, { a: 'true' })
77 | ).toEqual(abcQueryString)
78 | expect(createMergedQuery({ b: 'true', c: 'true', a: 'true' })).toEqual(
79 | abcQueryString
80 | )
81 | })
82 |
83 | it('with boolean values', () => {
84 | expect(createMergedQuery({ bool: 'true', bool2: 'false' })).toEqual(
85 | 'bool=true&bool2=false'
86 | )
87 | })
88 |
89 | it('with removed null values', () => {
90 | expect(createMergedQuery({ nullable: null })).toEqual('')
91 | })
92 |
93 | it('with removed undefined values', () => {
94 | expect(createMergedQuery({ undef: undefined })).toEqual('')
95 | })
96 |
97 | it('with removed entries by overwrite with null', () => {
98 | expect(createMergedQuery({ nullable: 'true' }, { nullable: null })).toEqual(
99 | ''
100 | )
101 | })
102 |
103 | it('with boolean overwriting null', () => {
104 | expect(createMergedQuery({ nulled: null }, { nulled: 'false' })).toEqual(
105 | 'nulled=false'
106 | )
107 | })
108 |
109 | it('allows empty objects', () => {
110 | expect(createMergedQuery({}, { a: 'c' }, {})).toEqual('a=c')
111 | })
112 |
113 | it('with removed entries by overwrite with undefined', () => {
114 | expect(
115 | createMergedQuery(
116 | { otherwiseEmpty: 'false', notDefined: 'true' },
117 | { notDefined: undefined },
118 | { otherwiseEmpty: 'true' }
119 | )
120 | ).toEqual('otherwiseEmpty=true')
121 | })
122 |
123 | it('with array value', () => {
124 | expect(createMergedQuery({ arr: ['1', '2', '3'] })).toEqual(
125 | 'arr=1&arr=2&arr=3'
126 | )
127 | })
128 |
129 | it('with array value overwrite (no automatic concat)', () => {
130 | expect(createMergedQuery({ arr: ['1'] }, { arr: ['a', 'b'] })).toEqual(
131 | 'arr=a&arr=b'
132 | )
133 | })
134 |
135 | it('with array with empty', () => {
136 | expect(createMergedQuery({ arr: [''] })).toEqual('arr=')
137 | })
138 |
139 | it('with empty array', () => {
140 | expect(createMergedQuery({ arr: [] })).toEqual(
141 | 'arr=' + encodeURIComponent(EMPTY_ARRAY_STRING)
142 | )
143 | })
144 | })
145 |
--------------------------------------------------------------------------------
/src/packages/use-location-state/src/useLocationState/useLocationReducer.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useMemo, useState } from 'react'
2 | import useLocationStateInterface from './useLocationStateInterface'
3 | import {
4 | LocationStateOpts,
5 | SetLocationStateOptions,
6 | } from './useLocationState.types'
7 | import { useRefLatest } from '../hooks/useRefLatest'
8 |
9 | const validTypes = ['string', 'number', 'boolean', 'object', 'undefined']
10 | const locationStateOptsDefaults: LocationStateOpts = Object.freeze({})
11 |
12 | export type LocationDispatch = (
13 | value: A,
14 | opts?: SetLocationStateOptions
15 | ) => void
16 | export type LocationReducerFn
2 |
4 |
5 | [](https://www.npmjs.com/package/use-location-state)
6 | [](https://codecov.io/gh/xiel/use-location-state)
7 | 
8 | [](https://lerna.js.org/)
9 |
10 | store and retrieve state into/from the browsers [location history](https://developer.mozilla.org/en-US/docs/Web/API/History) using modern hooks
11 |
12 | ## ✨ Features
13 |
14 | - makes it easy to provide a nice UX to your users, by restoring part of the app state after navigation actions
15 | - makes it easy to share the application in a customizable state
16 | - **`useLocationState(name, defaultValue)`**
17 | - restores the latest value after navigation actions (back/forward), by keeping value in `history.state`
18 | - supported value types: `string | number | boolean | Date | Array | Object`
19 | - handles complex & nested values - all values that can be serialized are supported
20 | - **`useQueryState(name, defaultValue)`**
21 | - restores the latest value from URL (`location.href`) and after navigation actions (back/forward)
22 | - supported value types: `string | number | boolean | Date | string[]`
23 | - handles stringification and parsing from query string of for supported value types
24 | - invalid entries from the query string are discarded and the component will receive the defaultValue instead
25 |
26 | { useLocationState, useQueryState }
3 |
109 |
112 | {active &&
114 | )
115 | }
116 | ```
117 |
118 |
119 | Some active content
} 113 |
120 |
121 |
122 | ### Example with multiple useQueryState hooks in one component
123 |
124 | ```javascript
125 | import { useQueryState } from 'use-location-state'
126 |
127 | function MyComponent() {
128 | const [name, setName] = useQueryState('name', 'Sarah')
129 | const [age, setAge] = useQueryState('age', 25)
130 | const [active, setActive] = useQueryState('active', false)
131 | // ...
132 | }
133 | ```
134 |
135 |
136 |
137 |
138 |
139 | ## Router Integration (optional)
140 |
141 | In case you want use [`location.search`](https://developer.mozilla.org/en-US/docs/Web/API/Location/search) (after the question mark in the url) you need to use one of these extended versions of the package.
142 |
143 | We plan to provide clean and easy-to-use integrations for all popular routers.
144 | At the moment we provide integrations for:
145 |
146 | ### Next.js
147 |
148 | Import from `use-location-state/next` to use the router build into Next.js, which enables you to use the query state also during **SSR**.
149 |
150 | ```javascript
151 | import { useQueryState } from 'use-location-state/next'
152 |
153 | export { getServerSideProps } from 'use-location-state/next' // [1]
154 |
155 | export default function Page() {
156 | const [count, setCount] = useQueryState('count', 0)
157 | //...
158 | }
159 | ```
160 |
161 | [1] Page must be server rendered (SRR), otherwise React warns about a hydration mismatch, when your initial rendering depends on the query state. Export your own `getServerSideProps` function or the provided empty one.
162 |
163 |
164 |
165 |
166 |
167 | ### react-router (react-router@^6.0.0)
168 |
169 | Install & import the package for react-router
170 |
171 | ```bash
172 | yarn add react-router-use-location-state
173 | ```
174 |
175 | ```javascript
176 | import {
177 | useLocationState,
178 | useQueryState,
179 | } from 'react-router-use-location-state'
180 | ```
181 |
182 | Usage works the same as described above, except that the URL will look like this now:
183 |
184 | ```
185 | http://localhost:3000/?itemName=different+value
186 | ```
187 |
188 |
189 |
190 |
191 |
192 | ### Gatsby & @reach/router
193 |
194 | Gatsby & Reach Router are supported. Gatsby currently always scrolls up on location (state) changes. To keep the scroll position, when you update location state using the update function of `useLocationState`, add these lines to the **gatsby-browser.js** file in gatsby root folder.
195 |
196 | ```javascript
197 | // keeps same scroll pos when history state is pushed/replaced (same location === same position)
198 | // see: https://www.gatsbyjs.org/docs/browser-apis/#shouldUpdateScroll
199 | exports.shouldUpdateScroll = ({ routerProps, getSavedScrollPosition }) => {
200 | const currentPosition = getSavedScrollPosition(routerProps.location)
201 | return currentPosition || true
202 | }
203 | ```
204 |
205 | ### More routers soon - work in progress
206 |
207 | Your favorite router is missing? Feel free to [suggest a router](https://github.com/xiel/use-location-state/issues).
208 |
209 | ## Compatibility
210 |
211 | Tested in current versions Chrome, Firefox, Safari, Edge, and IE11. This library relies on new, yet stable ECMAScript features, so you might need to include a [polyfill](https://www.npmjs.com/package/react-app-polyfill#polyfilling-other-language-features) if you want to support older browsers like IE11:
212 |
213 | ```javascript
214 | import 'react-app-polyfill/ie11'
215 | import 'react-app-polyfill/stable'
216 | ```
217 |
--------------------------------------------------------------------------------