diff --git a/packages/docsearch-react/button.js b/packages/docsearch-react/button.js
new file mode 100644
index 000000000..5614c2a79
--- /dev/null
+++ b/packages/docsearch-react/button.js
@@ -0,0 +1 @@
+export { DocSearchButton } from './dist/esm/DocSearchButton.js';
diff --git a/packages/docsearch-react/modal.js b/packages/docsearch-react/modal.js
new file mode 100644
index 000000000..7ae1e01d7
--- /dev/null
+++ b/packages/docsearch-react/modal.js
@@ -0,0 +1 @@
+export { DocSearchModal } from './dist/esm/DocSearchModal.js';
diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
index 364b4fba5..bb91a2143 100644
--- a/packages/docsearch-react/src/DocSearchButton.tsx
+++ b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -17,7 +17,7 @@ function isAppleDevice() {
return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
}
-export function SearchButton(props: SearchButtonProps) {
+export function DocSearchButton(props: SearchButtonProps) {
const [key, setKey] = useState(() =>
isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT
);
diff --git a/packages/docsearch-react/style.js b/packages/docsearch-react/style.js
new file mode 100644
index 000000000..e3212c1bf
--- /dev/null
+++ b/packages/docsearch-react/style.js
@@ -0,0 +1 @@
+import './dist/esm/style.css';
diff --git a/packages/website/package.json b/packages/website/package.json
index e355f0c6f..f007cb7ac 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -11,8 +11,8 @@
"dependencies": {
"@docusaurus/core": "2.0.0-alpha.49",
"@docusaurus/preset-classic": "2.0.0-alpha.49",
+ "@francoischalifour/docsearch-react": "1.0.0-alpha.10",
"classnames": "2.2.6",
- "docsearch-react": "1.0.0-alpha.10",
"react": "16.13.0",
"react-dom": "16.13.0"
},
diff --git a/packages/website/src/theme/SearchBar/index.js b/packages/website/src/theme/SearchBar/index.js
index 0af1f241c..b4734039a 100644
--- a/packages/website/src/theme/SearchBar/index.js
+++ b/packages/website/src/theme/SearchBar/index.js
@@ -6,7 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { useHistory } from '@docusaurus/router';
import Link from '@docusaurus/Link';
import Head from '@docusaurus/Head';
-import { SearchButton } from 'docsearch-react';
+import { DocSearchButton } from '@francoischalifour/docsearch-react/button';
let DocSearch = null;
@@ -31,8 +31,8 @@ function SearchBar() {
}
return Promise.all([
- import('docsearch-react'),
- import('docsearch-react/dist/esm/style.css'),
+ import('@francoischalifour/docsearch-react/modal'),
+ import('@francoischalifour/docsearch-react/style'),
]).then(([{ DocSearchModal }]) => {
DocSearch = DocSearchModal;
setIsLoaded(true);
@@ -94,7 +94,7 @@ function SearchBar() {
/>
-
+
{isLoaded &&
isShowing &&