Package Exports

react-speakeazii
react-speakeazii/dist/index.esm.js
react-speakeazii/dist/index.js
react-speakeazii/dist/styles.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-speakeazii) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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 } from "react-speakeazii";

function App() {
  return (
    <>
      <VisitorTracker 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: "john@example.com",
    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

react-speakeazii