@bnnvara/search

search package for the BNNVARA design system

Usage no npm install needed!

<script type="module">
  import bnnvaraSearch from 'https://cdn.skypack.dev/@bnnvara/search';
</script>

README

Example:

The component requires the following properties:

Name Type Description
baseUrl string path to the Api used
search ({searchQuery: string, from: number, page: number, sort: { sort: string, url: string }, }) => Promise Callback that returns a promise that results to an data object containing an results object that has an array of search query results.
fuzzySearch (url: string, search: string, autocomplete: () => void, results: number, title: string, page: number) => Promise Callback that returns a promise that results to an object named autocomplete containing an array of search results. Will be throttled.
ref reference reference to the autocomplete input field
initialSearchText string initial search query

JS

import React from 'react';
import Search from '@bnnvara/search';

const fuzzySearch = () => Promise.resolve({ data: { autocoplete : [] } });
const search = ({ searchQuery, page, from, sort }) => Promise.resolve({ data: { search : [] } });
const baseUrl = 'http://localhost:4321/api';
let textInput = React.createRef();

export default () => (
  <Search
    fuzzySearch={fuzzySearch}
    search={search}
    initialSearchText="test" 
    baseUrl={baseUrl}
    ref={textInput}
  />
);