Skip to content

📘 The easiest way to add search to your documentation.

License

Notifications You must be signed in to change notification settings

elianero/docsearch

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DocSearch

The easiest way to add search to your documentation – for free.

Netlify Status npm version License

DocumentationJavaScript PlaygroundReact Playground


DocSearch crawls your documentation, pushes the content to an Algolia index and provides a dropdown search experience on your website.

Preview

Screencast

Light Dark
Light preview Dark preview

Usage

Don't have your Algolia credentials yet? Apply to DocSearch!

JavaScript

Installation

yarn add @docsearch/js@3
# or
npm install @docsearch/js@3

If you don’t want to use a package manager, you can use a standalone endpoint:

<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

Get started

To get started, you need a container for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:

<div id="docsearch"></div>

Then, insert DocSearch into it by calling the docsearch function and providing the container. It can be a CSS selector or an Element.

Make sure to provide a container (for example, a div), not an input. DocSearch generates a fully accessible search box for you.

import docsearch from '@docsearch/js';

import '@docsearch/css';

docsearch({
  container: '#docsearch',
  appId: 'YOUR_APP_ID',
  indexName: 'YOUR_INDEX_NAME',
  apiKey: 'YOUR_SEARCH_API_KEY',
});

React

Installation

yarn add @docsearch/react@3
# or
npm install @docsearch/react@3

If you don’t want to use a package manager, you can use a standalone endpoint:

<script src="https://cdn.jsdelivr.net/npm/@docsearch/react@3"></script>

Get started

DocSearch generates a fully accessible search box for you.

import { DocSearch } from '@docsearch/react';

import '@docsearch/css';

function App() {
  return (
    <DocSearch
      appId="YOUR_APP_ID"
      indexName="YOUR_INDEX_NAME"
      apiKey="YOUR_SEARCH_API_KEY"
    />
  );
}

export default App;

Styling

Read documentation →

Related projects

DocSearch is made of the following repositories:

License

MIT

About

📘 The easiest way to add search to your documentation.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 40.8%
  • JavaScript 31.4%
  • CSS 27.8%