React Components

When using React.js frameworks like Next.js, Gatsby or Create React App it makes sense to use the RVS components directly instead of using the .initModal() shortcut.

Similarly you instantiate the ValuSearch object and pass in the provided customer id and api key:

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

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

In your components you need to wrap the application with the Provider component and bind the input using the useInput() React hook.

function App() {
    const ref = vs.useInput();

    return (
        <vs.Provider>
            <header>
                <input id="search" type="text" ref={ref} />
            </header>
            <main>
                <vs.Results />
            </main>
        </vs.Provider>
    );
}

The Results component renders the search results. This does not implement the modal behaviour but if you want it you can use the Modal component instead of the Results:

<main>
    <vs.Modal />
</main>