Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

apollo-algolia-autocomplete

Package Overview
Dependencies
3
Maintainers
2
Versions
44
Issues
File Explorer

Advanced tools

apollo-algolia-autocomplete

Algolia autocomplete in React

    1.3.3latest

Version published
Maintainers
2
Yearly downloads
9,861

Weekly downloads

Readme

Source

Apollo Algolia Autocomplete

This repo contains a custom Algolia autocomplete React component that powers the search bar in various Apollo GraphQL sites.

Installation

npm i apollo-algolia-autocomplete

Demo

https://apollo-algolia.netlify.app/

apollo-algolia-autocomplete

Usage

// App.js import React from 'react'; import Autocomplete from './components/autocomplete'; function App() { return ( <div> ... <Autocomplete appId={'YOUR_APP_ID'} apiKey={'YOUR_API_KEY'} currentSource="blog" docset="react" /> {/* content that should show up beneath the search bar when the search modal is closed */} </div> ); } export default App;

Props

NameDescriptiontypeDefault valueRequired
appIdYour Algolia app IDstring--yes
apiKeyYour Algolia API keystring--yes
currentSourceAlgolia index name ('docs', 'blog', 'odyssey') that you want to appear first in the search resultsstring'docs'no
docsetName of the docset by which you want to filter the documentation resultsstring''no
sourcesAlgolia indices to append to the default Autocomplete sourcesobjectdefaultSources var in Autocomplete.jsno

If a currentSource prop is provided, the search result sources will be sorted to put the currentSource at the top.

Any additional props will be passed to the autocomplete function from @algolia/autocomplete-js.

**This component has the Algolia sources baked in and is therefore not customizable on that front. The only customizable aspect of the Algolia sources is which source results are displayed first (via the currentSource prop)

Custom styling

This package uses the autocomplete-theme-classic to provide some default styling. It also uses vanilla CSS to override some of those defaults to better fit the Apollo brand.

You can find the different class names and CSS variables already being used by autocomplete-theme-classic in the Algolia docs. This will enable you to override any of them with your own styles. Create a .css file with any overrides and import it wherever you're rendering your Autocomplete component.

**Some of this package's custom styles stray a bit from the default Algolia theme. Below are the additional classes that have been added:

TO DO

Known Bugs 🐛

UI Ideas

  • breadcrumbs so users can see what section within the docs the search result is in
  • category tags
  • in search results and page previews, have different color for the parts of the text that match the search
  • images for blogs/odyssey?

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc