atlas-static-site-search-box

Plug and play search button and modal to be used with Atlas Search and Realm

Install

npm install --save atlas-static-site-search-box

Usage

See Atlas Static Site Search for detailed instructions on setting up the backend and using this component.

import React, { Component } from 'react'

import Search from 'atlas-static-site-search-box'

class Example extends Component {
  render() {
    return <Search id={YOUR_REALM_APP_ID} />
  }
}

Example

See Atlas Static Site Search for most up-to-date example/demo. example directory is more than likely not in sync / may not work.

Your Realm App

Your realm app should allow anonymous credentials for user login and have a function searchPageContents(query: string) that returns search results using Atlas Search, see Atlas Search Highlighting for an example of the results that should be in the format:

interface Result {
  // the link to the page / document in question
  _id: string
  // what is displayed
  title: string
  // not displayed
  doc_text: string
  // this component displays differently whether there are highlights or not
  highlights?: Array<Highlight>
}

export interface Highlight {
  path: string
  texts: Documents[]
  score: number
}

export interface Documents {
  value: string
  type: 'hit' | 'text'
}

License

MIT © joonyoungleeduke, mongodben, MarcusSorealheis, nlarew, Shibi-bala, who were all part of the project for MongoDB Skunkworks 2022 Atlas Static Site Search that originally led to creating this component