Synapse-search NPM

Synapse

Back end-less, config-less client side search. Uses React, but also works without.

Without React

Create an element with a data attribute of data-synapse-input that Synapse will automatically inject the input tag into as well as a data-synapse-results element for the results.

<div data-synapse-input></div>
<div data-synapse-results></div>

Add the JavaScript before your closing </body> tag:

<script src='https://synapse-v2.netlify.com/index.js'></script>
<script>
	new SynapseInject()
</script>

That's it! Then just type something in the input. Synapse will automatically recursively crawl links starting with the ones found on the current page and deliver search results.

With React

Installation

With npm:

npm install --save synapse-search

Or with Yarn:

yarn add synapse-search

Usage

import { SynapseInput, SynapseResults } from 'synapse-search'

...

<SynapseInput />
<SynapseResults />

Alternatively there is also a fully styled modal that will open up when the user starts typing. This can be useful for a quick drop-in solution:

import { SynapseInput, SynapseModal } from 'synapse-search'

...

<SynapseInput />
<SynapseModal />

Polyfill

Syanapse requires Object.assign to work properly. If your target browsers don't support this, it will need to be polyfilled in. The best way to do this is usually to include polyfill.io on any pages that use Synapse:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Options

Without React, you can pass options to the constructor:

new SynapseInject({
	matchThreshold: .01
})

With React, you can use the SynapseConfig function:

import { SynapseConfig } from 'synapse-search'

SynapseConfig({
	matchThreshold: .01
})

Prop	Description	Default
placeholder	Placeholder attribute in input elements	`"Search..."`
noResults	A custom "no results" message/component	`"No Results Found"`
createLink	A function that creates custom links for each result	`(href, contents) => <a href={href}>{contents}</a>`
contentSelector	A query selector of the content on the page to crawl	`"body"`
matchThreshold	Do not show result if match is under this threshold	`.007`
batchSize	The number of pages to fetch per batch	`6`
batchSearch	The number of batches to create per search	`3`
open	Set to `true` or `false` to open or close the modal	`false`

Things to Consider

Performance

While Synapse will work with any website, it is best used on small to medium size websites (less than 100 pages). Search results will be less accurate the more pages there are or if there's not a lot of hyperlinks on each page for it to crawl. For larger websites, Algolia is a great alternative.