Ractive Ez Search Sync

Href search synchronizer - keeps the url search in sync with a ractive object.

Install

npm i ractive-ez-searchsync

import 'ractive-ez-searchsync';

Usage

<EzSearchSync search="{{ filters }}" mapper="{{ mapper }}" />
<EzSearchSync mode="push" />
<EzSearchSync defer />

• search: Simple key => value object that contains the query parameters
• mapper: Object that maps a key to a { parse, stringify } object to map between a javascript object and an url query string
• mode: push to use history.pushState, replace to use history.replaceState
• defer: When initially loading the component, the current location query will be used to populate the search object. Use defer to disable this behaviour.

import { mapper } from 'ractive-ez-searchsync';
 
new Ractive({
    data() {
        return {
            search: {
                name: "John",
                active: true,
                born: new Date(),
                age: 87,
                password: "secret",
                labels: ["Male", "Tall", "Old"]
            },
            mapper: {
                name: mapper.string,
                active: mapper.boolean,
                born: mapper.date,
                age: mapper.number,
                // password: omitted, will not be synchronized
                labels: {
                    parse: string => string.split(","),
                    stringify: array => array.join(",")
                }
            }
        }
    }
});