Standalone API

If your site does not use React for anything else the "Standalone API" documented on this page is recommended but if you are using tools like Next.js, Gatsby or otherwise want full control jump to the React Components section.

We recommend lazy loading the RVS code but for the first examples we just load the JavaScript-bundle close to the closing </body>.

The simplest way to embed RVS is to use the "Fullscreen modal" which will open the Search Interface over the existing page when the vs.activate() method is called. This modal will contain the search input, results and the close button. It will also handle focus trapping for keyboard and screen reader usage.

HTML:

<body>
    <header>
        <button class="search-button" type="button">Search</button>
    </header>
    <main>
        <div class="content">...</div>
    </main>
    <script async src="bundle.js"></script>
</body>

JavaScript:

import { ValuSearch } from "@valu/react-valu-search";

const vs = new ValuSearch({
    customer: "<customer id>",
    apiKey: "<api key>",
});

vs.initModal();

document.querySelector(".search-button").addEventListener("click", () => {
    vs.activate();
});

For full working example checkout this example:

https://github.com/valu-digital/react-valu-search-examples/tree/master/parcel-fullscreen-modal

Custom Search Input

A common pattern is to place the search input to the site header and open the search results below it when user starts typing search terms.

<body>
    <head>
        <style>
            /* Add margin to expose the header when the search modal is open */
            .valu-search-modal {
                top: 100px;
            }
        </style>
    </head>
    <header>
        <input class="search-input" type="text" />
    </header>
    <main>
        <div class="content">...</div>
    </main>
    <script async src="bundle.js"></script>
</body>

JavaScript:

import { ValuSearch } from "@valu/react-valu-search";

const vs = new ValuSearch({
    customer: "<customer id>",
    apiKey: "<api key>",
    slots: {
        modalHeader: () => null,
    },
});

vs.bindInput(document.querySelector(".search-input"));

vs.initModal();

The .bindInput() method will bind the input for RVS. It will open the search modal when it is focused and will react when users types into it. It can be called on multiple inputs if you have a different input for mobile layout on the same page for example. Input can be also unbound with .unbindInput(input).

We also add a "Slot override" called modalHeader which replaces the build-in header. Here we replace it with null which just removes the header containing the build-in input, since we don't need one as we now have our own. Slot Overrides are "Render Props" if you are familiar with React.js concepts. Read more on the Slot Overrides page.

Full example:

https://github.com/valu-digital/react-valu-search-examples/tree/master/parcel-header-input

Fullscreen Modal​

Custom Search Input​

Fullscreen Modal

Custom Search Input