@indieboosting/react

IndieBoosting React Component

This is a React component for IndieBoosting.com to help you list other indie products on your site and earn money from them.

Examples

• Check out: https://indieboosting.com/customize-a-widget

Instructions

Install the package

npm i @indieboosting/react

[Alternatives] Vanilla JavaScript Library of IndieBoosting widget

<link rel="stylesheet" href="https://cdn.indieboosting.com/latest/style.css">
<script src="https://cdn.indieboosting.com/latest/script.js?id=XXXXXX"></script>

Use the component

1. Create a new boosting channel on IndieBoosting.com and get your id (tracking ID).

2. [Optional] Import the CSS in your Next.js _app.js or _app.tsx file:

<link rel="stylesheet" href="https://cdn.indieboosting.com/latest/style.css" />

3. Use the component in your app:

import { IndieBoosting } from "@indieboosting/react";

const YourComponent = () => {
  return <IndieBoosting id="your-tracking-id" />;
};

export default YourComponent;

Props

Required props:

• id: The tracking ID of your boosting channel.

Optional props:

• className: Custom CSS class for the container.
• noBorder: If true, removes the border around the component.
• noShadow: If true, removes the shadow effect.
• noTitle: If true, hides the title.
• noCredits: If true, hides the credits.
• noPadding: If true, removes the padding.
• openSelf: If true, opens links in the same tab.
• theme: Color theme, either light or dark (default: auto).
• title: Custom title for the component (default: "Top products").
• maxProducts: Maximum number of products to display (default: 3, max: 10).
• maxColumns: Maximum number of columns to display (default: 3).
• direction: Layout direction, either horizontal (default) or vertical.
• permanent: If true, the products will be displayed permanently (life-time). Ideally used for a single page, blog details, etc.
• permanentUrl: The permanent URL of the current page, required if permanent is true.
• owned: If true, the products will be displayed as owned by the current channel's user.
• debug: If true, enables debug mode with additional console logging.

Examples

<IndieBoosting id="TRACKINGID" maxProducts={5} direction="vertical" permanent />

Development

Installation

You can install it with npm (don't expect much fanciness):

npm i
# or
bun i

Development

npm run dev
# or
bun run dev

Build

npm run build
# or
bun run build

Publish

• Push to main to trigger a release.

---

Credits

• This repository was created by @mrgoonie.
• 👉 Follow me on X.