diff --git a/cypress/integration/useQueryState.spec.js b/cypress/integration/useQueryState.spec.js
index 339dd410f..d88e80713 100644
--- a/cypress/integration/useQueryState.spec.js
+++ b/cypress/integration/useQueryState.spec.js
@@ -1,20 +1,145 @@
 /// <reference types="cypress" />
 
 function runTest() {
-  cy.get('#value').should('be.empty')
-  cy.contains('Set A').click()
-  cy.location('search').should('eq', '?key=a')
-  cy.get('#value').should('have.text', 'a')
-  cy.contains('Set B').click()
-  cy.location('search').should('eq', '?key=b')
-  cy.get('#value').should('have.text', 'b')
-  cy.contains('Clear').click()
-  cy.location('search').should('be.empty')
-  cy.get('#value').should('be.empty')
+  // String
+  {
+    cy.get('#string_value').should('be.empty')
+    cy.get('#string_set_a')
+      .click()
+      .location('search')
+      .should('eq', '?string=a')
+      .get('#string_value')
+      .should('have.text', 'a')
+    cy.get('#string_set_b')
+      .click()
+      .location('search')
+      .should('eq', '?string=b')
+      .get('#string_value')
+      .should('have.text', 'b')
+    cy.get('#string_clear')
+      .click()
+      .location('search')
+      .should('be.empty')
+      .get('#string_value')
+      .should('be.empty')
+  }
+
+  // Integer
+  {
+    cy.get('#int_value').should('be.empty')
+    cy.get('#int_increment')
+      .click()
+      .location('search')
+      .should('eq', '?int=1')
+      .get('#int_value')
+      .should('have.text', '1')
+    cy.get('#int_increment')
+      .click()
+      .location('search')
+      .should('eq', '?int=2')
+      .get('#int_value')
+      .should('have.text', '2')
+    cy.get('#int_decrement')
+      .click()
+      .location('search')
+      .should('eq', '?int=1')
+      .get('#int_value')
+      .should('have.text', '1')
+    cy.get('#int_decrement')
+      .click()
+      .location('search')
+      .should('eq', '?int=0')
+      .get('#int_value')
+      .should('have.text', '0')
+    cy.get('#int_decrement')
+      .click()
+      .location('search')
+      .should('eq', '?int=-1')
+      .get('#int_value')
+      .should('have.text', '-1')
+    cy.get('#int_clear')
+      .click()
+      .location('search')
+      .should('be.empty')
+      .get('#int_value')
+      .should('be.empty')
+  }
+
+  // Float
+  {
+    cy.get('#float_value').should('be.empty')
+    cy.get('#float_increment')
+      .click()
+      .location('search')
+      .should('eq', '?float=0.1')
+      .get('#float_value')
+      .should('have.text', '0.1')
+    cy.get('#float_increment')
+      .click()
+      .location('search')
+      .should('eq', '?float=0.2')
+      .get('#float_value')
+      .should('have.text', '0.2')
+    cy.get('#float_decrement')
+      .click()
+      .location('search')
+      .should('eq', '?float=0.1')
+      .get('#float_value')
+      .should('have.text', '0.1')
+    cy.get('#float_decrement')
+      .click()
+      .location('search')
+      .should('eq', '?float=0')
+      .get('#float_value')
+      .should('have.text', '0')
+    cy.get('#float_decrement')
+      .click()
+      .location('search')
+      .should('eq', '?float=-0.1')
+      .get('#float_value')
+      .should('have.text', '-0.1')
+    cy.get('#float_clear')
+      .click()
+      .location('search')
+      .should('be.empty')
+      .get('#float_value')
+      .should('be.empty')
+  }
+
+  // Float
+  {
+    cy.get('#bool_value').should('be.empty')
+    cy.get('#bool_toggle')
+      .click()
+      .location('search')
+      .should('eq', '?bool=true')
+      .get('#bool_value')
+      .should('have.text', 'true')
+    cy.get('#bool_toggle')
+      .click()
+      .location('search')
+      .should('eq', '?bool=false')
+      .get('#bool_value')
+      .should('have.text', 'false')
+    cy.get('#bool_clear')
+      .click()
+      .location('search')
+      .should('be.empty')
+      .get('#bool_value')
+      .should('be.empty')
+  }
+
+  // todo: Add tests for:
+  // Timestamp
+  // ISO DateTime
+  // String enum
+  // JSON object
+  // Array of strings
+  // Array of integers
 }
 
 describe('useQueryState', () => {
-  it('uses string by default', () => {
+  it('works in standard routes', () => {
     cy.visit('/useQueryState')
     runTest()
   })
diff --git a/src/pages/useQueryState/index.tsx b/src/pages/useQueryState/index.tsx
index 1ca685b56..b95ede0fe 100644
--- a/src/pages/useQueryState/index.tsx
+++ b/src/pages/useQueryState/index.tsx
@@ -1,16 +1,77 @@
 import { NextPage } from 'next'
 import React from 'react'
-import { useQueryState } from '../../../'
+import { queryTypes, useQueryState } from '../../../'
 
 const IntegrationPage: NextPage = () => {
-  const [state, setState] = useQueryState('key')
+  const [string, setString] = useQueryState('string')
+  const [int, setInt] = useQueryState('int', queryTypes.integer)
+  const [float, setFloat] = useQueryState('float', queryTypes.float)
+  const [bool, setBool] = useQueryState('bool', queryTypes.boolean)
   return (
-    <>
-      <button onClick={() => setState('a')}>Set A</button>
-      <button onClick={() => setState('b')}>Set B</button>
-      <button onClick={() => setState(null)}>Clear</button>
-      <p id="value">{state}</p>
-    </>
+    <main>
+      <h1>useQueryState</h1>
+      <section>
+        <h2>String</h2>
+        <button id="string_set_a" onClick={() => setString('a')}>
+          Set A
+        </button>
+        <button id="string_set_b" onClick={() => setString('b')}>
+          Set B
+        </button>
+        <button id="string_clear" onClick={() => setString(null)}>
+          Clear
+        </button>
+        <p id="string_value">{string}</p>
+      </section>
+      <section>
+        <h2>Integer</h2>
+        <button
+          id="int_increment"
+          onClick={() => setInt(old => (old ?? 0) + 1)}
+        >
+          Increment
+        </button>
+        <button
+          id="int_decrement"
+          onClick={() => setInt(old => (old ?? 0) - 1)}
+        >
+          Decrement
+        </button>
+        <button id="int_clear" onClick={() => setInt(null)}>
+          Clear
+        </button>
+        <p id="int_value">{int}</p>
+      </section>
+      <section>
+        <h2>Float</h2>
+        <button
+          id="float_increment"
+          onClick={() => setFloat(old => (old ?? 0) + 0.1)}
+        >
+          Increment by 0.1
+        </button>
+        <button
+          id="float_decrement"
+          onClick={() => setFloat(old => (old ?? 0) - 0.1)}
+        >
+          Decrement by 0.1
+        </button>
+        <button id="float_clear" onClick={() => setFloat(null)}>
+          Clear
+        </button>
+        <p id="float_value">{float}</p>
+      </section>
+      <section>
+        <h2>Boolean</h2>
+        <button id="bool_toggle" onClick={() => setBool(old => !old)}>
+          Toggle
+        </button>
+        <button id="bool_clear" onClick={() => setBool(null)}>
+          Clear
+        </button>
+        <p id="bool_value">{bool === null ? null : bool ? 'true' : 'false'}</p>
+      </section>
+    </main>
   )
 }