Skip to content

AlexanderLyon/Haystack-UI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Haystack UI

npm npm

Overview

Haystack UI is a React component that allows you to easily insert a search field into your website. It's based on the functionality of fuzzy-search plugin Haystack, but with a built-in interface.

Haystack UI Themes

Installation

Using npm:

npm i haystack-ui

Import Haystack UI component:

import { HaystackUI } from 'haystack-ui';

Render component:

<HaystackUI <options> />

Props

Haystack UI options

Required:

Option Default Description
source (array) null Pool of data to pull suggestions from

Optional:

Option Default Description
theme (string) light Color scheme ("light", "dark", or "ghost")
placeholder (string) "Search" Input placeholder text
showSuggestions (boolean) true Whether or not to show suggestion drop-down
inlineSuggestions (boolean) false Displays an autocompleted suggestion on the same line as input
suggestionLimit (number) 4 Maximum number of suggestions shown in drop-down
submitLocation (string) "#" URL of the file that will process GET method. Your search string will be received as "query"
caseSensitive (boolean) false Whether or not search is case sensitive
flexibility (number) 1 "Fuzziness" of suggestions. The lower the number, the more strict your suggestions will be
stemming (boolean) false Reduces tokens in a query to their base words
exclusions (string) null Add a string or regex to ignore in query
ignoreStopWords boolean false Ignore common stop words such as the, a, in, etc.

License

MIT