official docsearch component (e.g: in React/vue)

[endiliey]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

Most of the docsearch consumption is done through CDN or a <script tag. I was wondering if it's possible (in the future or at v3) to have an official docsearch component to be consumed in popular library/ framework like React/vue.

Example in react:

import React from 'react';
import SearchBar from '@docsearch/SearchBar';

function MyCode() {
  // do something

  return <SearchBar api={'1231fasd123'} />;

I believe there is a lot of OSS folks relying on DocSearch and maybe there will be a lot of people who wanted to help out.

[Haroenv]

https://github.com/reactjs/reactjs.org/blob/master/src/components/LayoutHeader/DocSearch.js is probably the best implementation of a React wrapper for now

[endiliey]

Hmm. Reactjs.org still relies on the link script. They had to use react-helmet functionality in gatsbyjs to include the script. Was hoping we could consume it through npm package. And it can be lazy loaded.(reactjs basically include it on every single page)

Anyway here is our wrapper: https://github.com/facebook/Docusaurus/blob/master/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js

Not the best implementation in the world 🤣 works well. Copied and modified a little bit from reactjs 😉

[s-pace]

Let's see how people upvote this issue. Definitely a good point for the v3

[endiliey]

Plugging in Vuepress implementation for it. Could be helpful for anyone needing it in Vue

https://github.com/vuejs/vuepress/blob/master/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue

[s-pace]

Might be doable thanks to the v3 (beta so far)