Timo React Feedback Component

A React component for collecting user feedback and bug reports.

Installation

npm install @timoai/react
# or
yarn add @timoai/react

Usage

Global Registration

import React from 'react';
import { TimoModal } from '@timoai/react';

function App() {
  return (
    <div>
      <TimoModal
        apiKey="your-api-key"
        baseUrl="https://api.timo.zeratus.com" // Optional, defaults to production API
        buttonLabel="Feedback"
        modalTitle="Submit Feedback"
        theme={{
          primaryColor: '#7B7FEF',
          secondaryColor: '#f3f4f6',
          borderRadius: '12px',
          fontFamily: 'Inter, system-ui, sans-serif',
        }}
        onSubmitSuccess={(data) => console.log('Feedback submitted:', data)}
        onSubmitError={(error) => console.error('Error submitting feedback:', error)}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | ----------------- | -------- | --------------------- | ---------------------------------------------------------------------------------------- | | apiKey | string | "" | Required API key for authentication | | baseUrl | string | "https://api.timo.zeratus.com"| API base URL (optional, defaults to production) | | position | string | "bottom-right" | Position of the feedback button ("bottom-right", "bottom-left", "top-right", "top-left") | | buttonLabel | string | "Complaint" | Text displayed on the feedback button | | modalTitle | string | "Submit Complaint" | Title of the feedback modal | | inputPlaceholder | string | "Describe your issue" | Placeholder text for the feedback input | | submitButtonLabel | string | "Submit" | Text displayed on the submit button | | logoSrc | string | "" | URL of the logo to display (optional) | | theme | object | {} | Theme customization object | | metadata | object | {} | Additional metadata to send with the feedback | | maxFileSize | number | 10 | Maximum file size in MB | | allowedFileTypes | string[] | [] | Array of allowed file extensions |

Theme Object

interface Theme {
  primaryColor?: string; // Primary color for buttons and accents
  secondaryColor?: string; // Secondary color for backgrounds
  borderRadius?: string; // Border radius for components
  fontFamily?: string; // Font family for text
}

Callbacks

| Callback | Type | Description | | ----------------- | -------- | ------------------------------------------------- | | onSubmitSuccess | function | Called when feedback is successfully submitted | | onSubmitError | function | Called when there's an error submitting feedback |

Features

• Modern, responsive design
• File upload support with drag & drop
• Customizable themes
• Form validation
• Loading states
• Error handling
• Accessibility support
• Transition animations