react-ai-search

Description

react-ai-search is a cutting-edge, reusable React component that offers a search bar powered by ChatGPT and Libraria AI. With easy customization options and support for both light and dark modes, it's the perfect addition to your modern web application.

Installation

npm install react-ai-search

or

yarn add react-ai-search

Features

• 🔍 Powerful search capabilities backed by ChatGPT & Libraria AI.
• 🎨 Customizable styles for both light and dark modes.
• 🗝️ Pass in your libraryAppId
• 🌑 Support for dark mode with separate styling.
• 🔄 Option to keep the search state even after closing the component.

Prerequisites

• An anonKey on libraria.ai. You can follow the docs on docs.libraria.ai

Usage

import { LibrariaSearch } from 'react-ai-search';

function MyApp() {
    return (
        <LibrariaSearch
            anonKey="YOUR_LIBRARY_ANON_KEY_HERE"
            isDarkMode={false}
            style={{
                fontFamily: "Arial",
                fontColor: "black",
                // ... other styles
            }}
            darkModeStyle={{
                fontFamily: "Arial",
                fontColor: "white",
                // ... other styles for dark mode
            }}
            keepStateOnClose={true}
        />
    );
}

Props

anonKey (required)

• Type: string
• Description: Your anonKey to identify which knowledge base to use for search

keepStateOnClose

• Type: boolean
• Default: false
• Description: Option to keep the search state even after closing the component.

isDarkMode

• Type: boolean
• Default: false
• Description: Enable or disable dark mode.

style

• Type: StyleOverrideProps
• Description: Override the default styles for the search component in light mode.

darkModeStyle

• Type: StyleOverrideProps
• Description: Override the default styles for the search component in dark mode.

StyleOverrideProps

An object to customize the styles. Available properties:

• fontFamily: Font family of the search input.
• fontColor: Font color of the search input.
• fontSize: Font size of the search input.
• iconColor: Color of the search icon.
• borderColor: Border color of the search input.
• hoverColor: Border color of the search input on hover.
• backgroundColor: Background color of the search input.
• inputBorderRadius: Border radius of the search input.
• borderRadius: Border radius of the search component.
• inputBackgroundColor: Background color of the search input.

Contributing

We welcome contributions from the community. Please refer to the CONTRIBUTING.md for guidelines.

License

This package is licensed under the MIT License. See the LICENSE file for details.

---