enhancedocs-search
v1.1.3
Published
EnhanceDocs Search
Downloads
37
Maintainers
playolaReadme
EnhanceDocs Search
📦 Installing
Package manager
Using npm:
npm install enhancedocs-searchUsing yarn:
yarn add enhancedocs-search🚀 Usage
Getting Started
First you will need to create a project and a public key (pk_) in our Discord Channel.
Then you can install the package and start using it 🎉🎉
Use your public key to enable the enhanced search powered by AI:
import EnhancedSearch from 'enhancedocs-search';
import 'enhancedocs-search/dist/style.css';
<EnhancedSearch
config={{
projectId: "abc123",
accessToken: "pk_abc123"
}}
{...props}
/>Docusaurus Example
Configure Docusaurus theme to use your own search. See official documentation here.
// src/theme/SearchBar.js
import React from 'react';
import EnhancedSearch from 'enhancedocs-search';
import 'enhancedocs-search/dist/style.css';
export default function SearchBarWrapper(props) {
return (
<EnhancedSearch
config={{
projectId: "abc123",
accessToken: "pk_abc123"
}}
{...props}
/>
);
}Custom Theming
Set up your preferred primary color configuring the theme:
import EnhancedSearch from 'enhancedocs-search';
import 'enhancedocs-search/dist/style.css';
<EnhancedSearch
config={{
projectId: "abc123",
accessToken: "pk_abc123"
}}
theme={{
primaryColor: 'red'
}}
{...props}
/>Use it on any Vanilla project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vanilla project</title>
</head>
<body>
<div id="enhancedocs-search"></div>
<script type="module" src="/main.js"></script>
</body>
</html>Option 1: Install the NPM package and use the render helper:
Reference to any HTML element by ID (e.g.: <div id="enhancedocs-search"></div>):
import { renderSearch } from './enhancedocs-search';
renderSearch('enhancedocs-search', {
config: {
projectId: 'abc123',
accessToken: 'pk_abc123'
}
});Option 2: Usage via script
Use the Search component in any project, not just React. Load the CSS via style tag, refer to an element by id in your HTML and load EnhanceDocs script using a CDN for NPM:
- unpkg:
https://unpkg.com/enhancedocs-search@latest/dist/enhancedocs-search.umd.js - jsdelivr:
https://cdn.jsdelivr.net/npm/enhancedocs-search@latest/dist/enhancedocs-search.umd.js
NOTE: You will need to load peer dependencies react and react-dom.
<link href="https://unpkg.com/enhancedocs-search@latest/dist/style.css" rel="stylesheet">
<script>
document.addEventListener('DOMContentLoaded', () => {
function loadScript(src, onLoadCallback) {
const script = document.createElement('script');
script.src = src;
script.onload = onLoadCallback;
document.head.appendChild(script);
}
function initEnhanceDocsSearch() {
EnhancedocsSearch.renderSearch('enhancedocs-search', {
config: {
projectId: 'abc123', // <your-project-id>
accessToken: 'pk_abc123' // <your-access-token>
}
// ...props
});
}
loadScript('https://unpkg.com/react@18/umd/react.production.min.js', () => {
loadScript('https://unpkg.com/react-dom@18/umd/react-dom.production.min.js', () => {
loadScript('https://unpkg.com/enhancedocs-search@latest/dist/enhancedocs-search.umd.js', initEnhanceDocsSearch);
});
});
})
</script>
<div id="enhancedocs-search"></div>