Roozna Searchbar Documentation

The Roozna Searchbar is a powerful and highly customizable React component that allows you to integrate Roozna's business search capabilities directly into your application. This guide covers installation, basic usage, advanced configuration, and customization options.

Installation
Basic Usage
Props
Styling
Theming
Handling Results
Advanced Usage
Accessibility
Troubleshooting

Installation

First, install the Roozna React Searchbar package using npm or yarn:

npm install @roozna/react-search

Basic Usage

Here's a simple example of how to use the Searchbar component in your React application:

import React from 'react';
import { Searchbar } from '@roozna/react-search';

function App() {
  const handleSelect = (company) => {
    console.log('Selected company:', company);
  };

  return (
    <div>
      <h1>Business Search</h1>
      <Searchbar 
        apiKey="your_api_key_here" 
        onSelect={handleSelect}
      />
    </div>
  );
}

export default App;

Make sure to replace 'your_api_key_here' with your actual Roozna API key.

Props

The Searchbar component accepts the following props for customization:

Name
apiKey
Type
string
Description
Your Roozna API key.
Name
onSelect
Type
function
Description
Callback function called when a company is selected. Receives the selected company object as an argument.
Name
mainColor
Type
string
Description
Primary color for the component. Default is '#8B5CF6'.
Name
placeholderText
Type
string
Description
Placeholder text for the search input. Default is "Search companies...".
Name
labelText
Type
string
Description
Label text above the input. Default is "Company name*".
Name
size
Type
SearchbarSize
Description
Size of the component. Options are 'xs', 'sm', 'md', 'lg', 'xl', '2xl'. Default is 'sm'.
Name
width
Type
string
Description
Width of the component. Default is '25rem'.
Name
styles
Type
Partial<SearchbarStyles>
Description
Custom styles for various parts of the component.
Name
openByDefault
Type
boolean
Description
Whether the dropdown should be open by default. Default is false.
Name
theme
Type
ThemeMode
Description
'light' or 'dark' theme. If not specified, it will use the system preference.
Name
lightTheme
Type
Partial<Theme>
Description
Custom light theme options.
Name
darkTheme
Type
Partial<Theme>
Description
Custom dark theme options.

Styling

The Searchbar component comes with default styles, but you can easily customize its appearance using the styles prop. Here's an example of how to apply custom styles:

const customStyles = {
  container: {
    width: '100%',
    maxWidth: '500px',
  },
  label: {
    fontSize: '14px',
    fontWeight: 'bold',
  },
  inputContainer: {
    border: '2px solid #007bff',
    borderRadius: '8px',
  },
  input: {
    fontSize: '16px',
    padding: '10px 15px',
  },
  dropdown: {
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
  },
  dropdownItem: {
    padding: '12px 15px',
  },
  companyLogo: {
    borderRadius: '4px',
  },
  companyName: {
    fontWeight: 'bold',
  },
  companyWebsite: {
    fontSize: '12px',
  },
  // ... other style overrides
};

<Searchbar
  apiKey="your_api_key_here"
  styles={customStyles}
/>

Theming

The Searchbar supports both light and dark themes. You can specify a theme or let it automatically adjust based on the user's system preferences:

// Force light theme
<Searchbar apiKey="your_api_key" theme="light" />

// Force dark theme
<Searchbar apiKey="your_api_key" theme="dark" />

// Use system preference (default behavior)
<Searchbar apiKey="your_api_key" />

You can also customize the theme colors:

const customLightTheme = {
  backgroundColor: '#f0f4f8',
  textColor: '#333',
  borderColor: '#ddd',
  hoverColor: '#e6e6e6',
  placeholderColor: '#999',
};

const customDarkTheme = {
  backgroundColor: '#1a202c',
  textColor: '#f7fafc',
  borderColor: '#4a5568',
  hoverColor: '#2d3748',
  placeholderColor: '#a0aec0',
};

<Searchbar
  apiKey="your_api_key"
  lightTheme={customLightTheme}
  darkTheme={customDarkTheme}
/>

Handling Results

The onSelect prop allows you to define a callback function that will be called when a user selects a result. This function receives the selected company object as its argument:

const handleSelect = (company) => {
  console.log('Selected:', company.name);
  console.log('Website:', company.website);
  console.log('ID:', company.id);
  // You could navigate to a detail page, open a modal, etc.
};

<Searchbar
  apiKey="your_api_key_here"
  onSelect={handleSelect}
/>

Advanced Usage

Here's an example of a more customized Searchbar implementation:

import React from 'react';
import { Searchbar } from '@roozna/react-search';

function App() {
  const handleSelect = (company) => {
    console.log('Selected company:', company);
    // Do something with the selected company data
  };

  const customStyles = {
    input: {
      borderColor: '#007bff',
      borderRadius: '8px',
    },
    dropdown: {
      backgroundColor: '#f8f9fa',
    },
  };

  return (
    <div>
      <h1>Advanced Business Search</h1>
      <Searchbar
        apiKey="your_api_key_here"
        onSelect={handleSelect}
        mainColor="#4A90E2"
        placeholderText="Find a company..."
        labelText="Search businesses"
        size="lg"
        width="100%"
        styles={customStyles}
        openByDefault={true}
        theme="light"
      />
    </div>
  );
}

export default App;

Accessibility

The Roozna Searchbar component is built with accessibility in mind:

It uses proper ARIA attributes for improved screen reader support.
It supports keyboard navigation within the dropdown (use arrow keys to navigate and Enter to select).
The component automatically adjusts to light or dark mode based on system preferences, improving readability.

Troubleshooting

If you encounter any issues while using the Roozna Searchbar, try the following:

Ensure you're using the latest version of the @roozna/react-search package.
Double-check that you've provided a valid API key.
Check the browser console for any error messages.
Verify that your React version is compatible with the Searchbar component.

If you're still experiencing problems, please contact our support team.