SpeakEasy

SpeakEasy is a lightweight React package that helps you integrate visitor tracking, contact forms, and portfolio-enhancing features like blogs, reviews, and messaging into your projects.

Installation

npm i react-speakeazii

or

yarn add react-speakeazii

Usage

1. Visitor Tracker

The VisitorTracker component should be placed in your main entry file (e.g., App.js) to automatically track and record visits.

import React from "react";
import { VisitorTracker, ContactForm, Blogs, Products, Services, Testimonials,  } from "react-speakeazii";

function App() {
  return (
    <>
      <VisitorTracker apikey="YOUR_API_KEY" />

      <Blogs apikey="YOUR_API_KEY" />

      <Products apikey="YOUR_API_KEY" />

      <Services apikey="YOUR_API_KEY" />
      
      <Testimonials apikey="YOUR_API_KEY" />

      <ContactForm apikey="YOUR_API_KEY" />
      
      {/* Your other app components */}
    </>
  );
}

export default App;

3. Utility Functions

You can call utility functions directly by passing your API key:

Get Blogs

import { getBlogs } from "react-speakeazii";

async function fetchBlogs() {
  const blogs = await getBlogs("YOUR_API_KEY");
  console.log(blogs);
}

Get Reviews

import { getReviews } from "react-speakeazii";

async function fetchReviews() {
  const reviews = await getReviews("YOUR_API_KEY");
  console.log(reviews);
}

Get Products

import { getProducts } from "react-speakeazii";

async function fetchReviews() {
  const products = await getReviews("YOUR_API_KEY");
  console.log(products);
}

Get Services

import { getServices } from "react-speakeazii";

async function fetchReviews() {
  const services = await getReviews("YOUR_API_KEY");
  console.log(services);
}

Send Message

import { sendMessage } from "react-speakeazii";

async function contact() {
  const response = await sendMessage("YOUR_API_KEY", {
    name: "John Doe",
    email: "[email protected]",
    message: "Hello! I love this package 🚀",
  });
  console.log(response);
}

Props

VisitorTracker

| Prop | Type | Required | Description | | ------ | ------ | -------- | ------------------------------- | | apikey | string | ✅ | Your API key for authentication |

ContactForm

| Prop | Type | Required | Description | | -------------------- | ----------------------------------------------- | -------- | --------------------------------- | | apiKey | string | ✅ | Your API key for authentication | | showName | boolean | ❌ | Toggle name field visibility | | showPhone | boolean | ❌ | Toggle phone field visibility | | showSubject | boolean | ❌ | Toggle subject field visibility | | nameLabel | string | ❌ | Label for name field | | emailLabel | string | ❌ | Label for email field | | phoneLabel | string | ❌ | Label for phone field | | subjectLabel | string | ❌ | Label for subject field | | messageLabel | string | ❌ | Label for message field | | namePlaceholder | string | ❌ | Placeholder for name input | | emailPlaceholder | string | ❌ | Placeholder for email input | | phonePlaceholder | string | ❌ | Placeholder for phone input | | subjectPlaceholder | string | ❌ | Placeholder for subject input | | messagePlaceholder | string | ❌ | Placeholder for message textarea | | sectionTitle | string | ❌ | Form title text | | sectionSubtitle | string | ❌ | Form subtitle text | | sectionDescription | string | ❌ | Form description text | | submitButtonText | string | ❌ | Submit button text | | loadingText | string | ❌ | Text shown while submitting | | successMessage | string | ❌ | Message displayed on success | | errorMessage | string | ❌ | Message displayed on error | | onSubmit | (formData: FormData) => void \| Promise<void> | ❌ | Custom submit handler | | onSuccess | (response?: any) => void | ❌ | Callback on successful submission | | onError | (error: any) => void | ❌ | Callback on submission error | | className | string | ❌ | Root wrapper CSS class | | containerClassName | string | ❌ | Container wrapper CSS class | | formClassName | string | ❌ | Form element CSS class | | inputClassName | string | ❌ | Input fields CSS class | | textareaClassName | string | ❌ | Textarea CSS class | | buttonClassName | string | ❌ | Submit button CSS class | | labelClassName | string | ❌ | Label CSS class | | customValidation | (formData: FormData) => string \| null | ❌ | Custom validation function | | showSuccessMessage | boolean | ❌ | Toggle success message display | | showErrorMessage | boolean | ❌ | Toggle error message display |

Blogs

| Prop | Type | Required | Description | | ----------------------- | -------------------------------------------------------- | -------- | --------------------------------------- | | apiKey | string | ✅ | Your API key for authentication | | showHeader | boolean | ❌ | Toggle the header section visibility | | headerTitle | string | ❌ | Header title text | | headerSubtitle | string | ❌ | Header subtitle text | | headerBadgeText | string | ❌ | Text displayed inside the header badge | | showHeaderBadge | boolean | ❌ | Toggle header badge visibility | | columns | { mobile?: number; tablet?: number; desktop?: number } | ❌ | Number of grid columns per breakpoint | | showImage | boolean | ❌ | Toggle project card image | | imageHeight | string | ❌ | Height of the card image (e.g. 200px) | | showDate | boolean | ❌ | Toggle project date display | | showKeywords | boolean | ❌ | Toggle keywords display | | maxKeywordsDisplay | number | ❌ | Maximum number of keywords shown | | maxDescriptionLines | number | ❌ | Max description lines before truncation | | contentCharacterLimit | number | ❌ | Character limit for card content | | modalTitle | string | ❌ | Title shown in the project modal | | showModalImage | boolean | ❌ | Toggle modal image display | | modalSections | Array<keyof ResearchProject> | ❌ | Sections to display in modal | | containerClassName | string | ❌ | Wrapper container CSS class | | headerClassName | string | ❌ | Header wrapper CSS class | | gridClassName | string | ❌ | Grid layout CSS class | | cardClassName | string | ❌ | Individual card CSS class | | modalClassName | string | ❌ | Modal wrapper CSS class | | badgeClassName | string | ❌ | Header badge CSS class | | onProjectClick | (project: ResearchProject) => void | ❌ | Fired when a project card is clicked | | onError | (error: Error) => void | ❌ | Error callback | | onSuccess | (blog: ResearchProject[]) => void | ❌ | Fired when projects load successfully | | customCardRenderer | (project: ResearchProject) => React.ReactNode | ❌ | Custom project card renderer | | customModalRenderer | (project: ResearchProject) => React.ReactNode | ❌ | Custom modal renderer |

Products

| Prop | Type | Required | Description | | --------------------- | -------------------------------------------------------- | -------- | ---------------------------------- | | apiKey | string | ✅ | Your API key for authentication | | showHeader | boolean | ❌ | Show or hide the header section | | headerTitle | string | ❌ | Header title text | | headerSubtitle | string | ❌ | Header subtitle text | | headerBadgeText | string | ❌ | Text displayed in the header badge | | showHeaderBadge | boolean | ❌ | Toggle header badge visibility | | columns | { mobile?: number; tablet?: number; desktop?: number } | ❌ | Grid column count per breakpoint | | showImage | boolean | ❌ | Toggle image display on cards | | imageHeight | string | ❌ | Height of the card image | | showDate | boolean | ❌ | Toggle project date display | | maxDescriptionLines | number | ❌ | Maximum description lines shown | | showKeywords | boolean | ❌ | Toggle keyword display | | maxKeywordsDisplay | number | ❌ | Maximum keywords displayed | | containerClassName | string | ❌ | Container wrapper CSS class | | headerClassName | string | ❌ | Header container CSS class | | gridClassName | string | ❌ | Grid layout CSS class | | cardClassName | string | ❌ | Individual card CSS class | | badgeClassName | string | ❌ | Header badge CSS class | | onError | (error: Error) => void | ❌ | Callback fired on error | | onSuccess | (blog: ResearchProject[]) => void | ❌ | Callback fired on successful fetch | | customCardRenderer | (project: ResearchProject) => React.ReactNode | ❌ | Custom card renderer | | customModalRenderer | (project: ResearchProject) => React.ReactNode | ❌ | Custom modal renderer |

Services

| Prop | Type | Required | Description | | --------------------- | -------------------------------------------------------- | -------- | ---------------------------------- | | apiKey | string | ✅ | Your API key for authentication | | showHeader | boolean | ❌ | Show or hide the header section | | headerTitle | string | ❌ | Header title text | | headerSubtitle | string | ❌ | Header subtitle text | | headerBadgeText | string | ❌ | Text displayed in the header badge | | showHeaderBadge | boolean | ❌ | Toggle header badge visibility | | columns | { mobile?: number; tablet?: number; desktop?: number } | ❌ | Grid column count per breakpoint | | showImage | boolean | ❌ | Toggle image display on cards | | imageHeight | string | ❌ | Height of the card image | | showDate | boolean | ❌ | Toggle project date display | | maxDescriptionLines | number | ❌ | Maximum description lines shown | | containerClassName | string | ❌ | Container wrapper CSS class | | headerClassName | string | ❌ | Header container CSS class | | gridClassName | string | ❌ | Grid layout CSS class | | cardClassName | string | ❌ | Individual card CSS class | | badgeClassName | string | ❌ | Header badge CSS class | | onError | (error: Error) => void | ❌ | Callback fired on error | | onSuccess | (blog: ResearchProject[]) => void | ❌ | Callback fired on successful fetch | | customCardRenderer | (project: ResearchProject) => React.ReactNode | ❌ | Custom card renderer | | customModalRenderer | (project: ResearchProject) => React.ReactNode | ❌ | Custom modal renderer |

Testimonials

| Prop | Type | Required | Description | | -------------------- | --------------------------------------- | -------- | ------------------------------------ | | apiKey | string | ✅ | Your API key for authentication | | rows | number | ❌ | Number of testimonial rows displayed | | marqueeSpeed | number | ❌ | Scrolling speed of the marquee | | pauseOnHover | boolean | ❌ | Pause animation when hovered | | gradientOverlay | boolean | ❌ | Enable gradient overlay effect | | cardClassName | string | ❌ | CSS class for testimonial cards | | containerClassName | string | ❌ | CSS class for the container | | cardWidth | string | ❌ | Width of each testimonial card | | gap | string | ❌ | Gap between testimonial cards | | showRating | boolean | ❌ | Show star rating | | maxContentLines | number | ❌ | Maximum lines of testimonial content | | avatarSize | string | ❌ | Size of the avatar image | | direction | "left" \| "right" \| "alternate" | ❌ | Scroll direction of testimonials | | containerStyle | CSSProperties | ❌ | Inline styles for the container | | cardStyle | CSSProperties | ❌ | Inline styles for cards | | starColor | string | ❌ | Color of rating stars | | showStarFill | boolean | ❌ | Fill stars instead of outline | | loadingComponent | React.ReactNode | ❌ | Custom loading state component | | errorComponent | React.ReactNode | ❌ | Custom error state component | | onError | (error: Error) => void | ❌ | Callback fired on error | | onSuccess | (testimonials: Testimonial[]) => void | ❌ | Callback fired on successful fetch |

License

DOM © 2025 SpeakEazii