IndieBacklink React Component

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

Instructions

Install the package

npm i @indiebacklink/react

Use the component

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

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

import "@indiebacklink/react/indiebacklink.css";

3. Use the component in your app:

import { IndieBacklink } from "@indiebacklink/react";

const YourComponent = () => {
  return <IndieBacklink 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.
• openSelf: If true, opens links in the same tab.
• theme: Color theme, either light (default) or dark.
• 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).
• permanentUrl: The permanent URL of the current page.
• 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

<IndieBacklink 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.