Enhancedocs-search NPM

EnhanceDocs Search

📦 Installing

Package manager

Using npm:

npm install enhancedocs-search

Using 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>

react enhancedocs search ChatGPT

mixpanel-browser react-markdown react-modal

@everything-registry/sub-chunk-1587

7 months ago

10 months ago

10 months ago

10 months ago