TypeScript icon, indicating that this package has built-in type declarations

    0.0.1-alpha.12 • Public • Published


    Version Dependency Status Peer Dependency Status Dev Dependency Status Downloads

    Easy-peasy Querystrings for Knockout


    $ yarn add @profiscience/knockout-contrib-querystring


    $ npm install @profiscience/knockout-contrib-querystring

    Typing are included, but have the caveat that query params that are observable arrays will only be typed as observables. This is due to a limitation with mapped types in TypeScript.

    Basic Usage

    import Query from '@profiscience/knockout-contrib-querystring'
    const query = Query.create({ sort: 'alpha' })
    query.sort() // alpha


    Query.create([config = {}, name])

    Create a new query instance passing a configuration object and optionally a name to group the query with. This allows you to create multiple query objects with the same params, and they will not interfere with each other. It also allows you to link queries if they are given the same group name.

    The configuration object contains key/value pairs of querystring param names and their config, respectively. A querystring param config may be an object that contains any combination of three props, default, initial, and coerce, or a value which will be used as the default and initial value. The coerce function allows you to transform a value before it is fully set.

    const query = Query.create({
      // query param named foo
      foo: {
        default: 'foo',
        initial: 'bar',
        coerce: (v) => v === 'baz' ? 'qux' : v
      bar: 'bar'

    In this case, the foo param will be set to "bar" initially — if not already in the querystring — but call to query.clear() will then set it to "foo". The coerce function disallows setting the param to "baz", and attempting to will cause it to be set to "qux" instead.

    NOTE: Params that are equal to their default will not be displayed in the querystring. Less === More.


    Returns JS object containing current query from URL — for group if any.

    Query.setParser({ parse, stringify })

    By default, this lib is dumb, and it does not use valid querystrings. Instead, it uses JSON.stringify and encodeURIComponent, and vice versa. This function allows you to define a custom parser.


    import Query from 'ko-querystring'
    import rison from 'rison' // https://github.com/Nanonid/rison
      parse: rison.decode_object,
      stringify: rison.encode_object


    Query params are created via super-cool ES6 proxies, so you don't need to explicitly define all the query params you will use. Simply access them, and they are there.

    Params will be initialized from the querystring if available, and their default value or undefined if not.


    Resets param to its default or undefined.


    Observable value that is true if the param is its default value, otherwise false.

    query.set(default || { default, initial, coerce })

    Change the default values for a query.


    Reset all the query params to their defined defaults, or undefined.


    Returns unwrapped query object.


    Returns stringified query.


    Return observable query object. i.e. ko.observable({ foo: 'foo' }) instead of { foo: ko.observable('foo') }


    Disposes the query object and cleans the querystring. Don't forget to clean up after 'yo self.


    Check the test file or the source. This lib is small enough to understand inside and out.


    npm i @profiscience/knockout-contrib-querystring

    DownloadsWeekly Downloads






    Unpacked Size

    72.3 kB

    Total Files


    Last publish


    • dorgeron
    • barsh