fillfeedback-reviews

Internal NPM package — React component for embedding FillFeedback reviews with horizontal scroll, lazy loading, and infinite scroll.

CSS is auto-injected at runtime. No CSS import needed anywhere — ever.

Install

npm install fillfeedback-reviews

Usage

import { FillFeedbackReviews } from "fillfeedback-reviews";
// ← no CSS import. Done.

export default function Page() {
  return (
    <FillFeedbackReviews
      apiKey="your-api-key"
      theme="auto"
      minRating={4}
      maxReviews={20}
      initialLoadCount={6}
      onReviewClick={(review) => console.log(review)}
    />
  );
}

Props

| Prop | Type | Default | Description | | ------------------ | ----------------------------- | ------------ | ---------------------------------------- | | apiKey | string | required | FillFeedback API key | | formId | string | undefined | Filter by form ID | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | Color theme | | showRating | boolean | true | Show star rating | | showDate | boolean | true | Show review date | | showAvatar | boolean | true | Show avatar / initials | | showVideos | boolean | true | Show video attachments | | showDocuments | boolean | false | Show document links | | maxReviews | number | 50 | Max reviews to fetch | | minRating | number | 1 | Min star filter (1–5) | | initialLoadCount | number | 6 | Reviews shown initially | | className | string | undefined | Extra class on wrapper for CSS overrides | | onReviewClick | (review: Review) => void | undefined | Card click callback |

Custom Styling

Override CSS variables on .fv-wrapper:

.fv-wrapper {
  --fv-primary: #3b82f6;
  --fv-border-radius: 20px;
  --fv-spacing: 24px;
  --fv-star-filled: #facc15;
  --fv-bg-dark: #0f172a;
}

Scope per-instance with the className prop:

<FillFeedbackReviews apiKey="..." className="my-reviews" />

.my-reviews {
  --fv-primary: #ef4444;
}

Full variable list: src/styles/index.css.

How CSS injection works

Styles live as a minified string in src/styles/inject.ts. On first import, the module creates a <style id="__fv_styles__"> tag in document.head. The id check makes it idempotent — multiple instances don't duplicate the tag.

Updating styles

1. Edit src/styles/index.css
2. Run:

   npx postcss src/styles/index.css -o /tmp/styles.min.css --use cssnano

3. Copy the output of /tmp/styles.min.css and paste it as the css string in src/styles/inject.ts
4. Rebuild: npm run build

Dev workflow

npm install        # install deps
npm run build      # compile → dist/
npm run dev        # watch mode
npm run clean      # delete dist/

Publishing

# 1. Edit src/ as needed
# 2. If CSS changed, follow "Updating styles" above
# 3. Bump version in package.json
# 4. Build
npm run build
# 5. Publish
npm login          # first time only
npm publish