A quick search component for meilisearch, inspired by algolia/docsearch.
light | dark |
---|---|
![]() |
![]() |
yarn add meilisearch-docsearch
# or
npm install meilisearch-docsearch
# or
pnpm add meilisearch-docsearch
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 "meilisearch-docsearch/js";
import "meilisearch-docsearch/css";
docsearch({
container: "#docsearch",
host: "YOUR_HOST_URL",
apiKey: "YOUR_SEARCH_API_KEY",
indexUid: "YOUR_INDEX_UID",
});
All styles are included in the package as:
- One big file:
-
import "meilisearch-docsearch/css";
-
- Individual small files:
-
import "meilisearch-docsearch/css/variables";
-
import "meilisearch-docsearch/css/button";
-
import "meilisearch-docsearch/css/modal";
-
If you are using solid-js
, you can import DocSearch
component directely which generates a fully accessible search box for you.
import { DocSearch } from "meilisearch-docsearch/solid";
import "meilisearch-docsearch/css";
function App() {
return (
<DocSearch
host="YOUR_HOST_URL"
apiKey="YOUR_SEARCH_API_KEY"
indexUid="YOUR_INDEX_UID"
/>
);
}
export default App;
The package also contains a browser bundle and the necessary styles that could be pulled through a CDN like unpkg.com:
-
add a container
<div id="docsearch"></div>
-
import the js borwser bundle and initialize the component
<script src="https://unpkg.com/meilisearch-docsearch@latest/dist/index.global.js"></script> <script> const { docsearch } = window.__docsearch_meilisearch__; docsearch({ container: "#docsearch", host: "YOUR_HOST_URL", apiKey: "YOUR_SEARCH_API_KEY", indexUid: "YOUR_INDEX_UID", }); </script>
-
import styles
<link rel="stylesheet" href="https://unpkg.com/meilisearch-docsearch@latest/dist/index.css" />
This project is inspired by algolia/docsearch
and meilisearch/docs-searchbar.js
MIT or MIT/Apache 2.0 where applicable.