open-index/open-npm huggingface dataset:
npm package: @indiebacklink/react
Description: This is a React component for [IndieBacklink.com](https://indiebacklink.com) to help you list other indie products on your site and earn money from them.
Author: mrgoonie
Latest version: 1.3.0

# IndieBacklink React Component

This is a React component for [IndieBacklink.com](https://indiebacklink.com) to help you list other indie products on your site and earn money from them.

## Instructions

### Install the package

```bash
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:

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

3. Use the component in your app:

```javascript
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

```javascript
<IndieBacklink id="TRACKINGID" maxProducts={5} direction="vertical" permanent />
```

## Development

### Installation

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

```bash
npm i
# or
bun i
```

### Development

```bash
npm run dev
# or
bun run dev
```

### Build

```bash
npm run build
# or
bun run build
```

### Publish

- Push to `main` to trigger a release.

---

## Credits

- This repository was created by [@mrgoonie](https://github.com/mrgoonie).
- 👉 Follow me on [X](https://x.com/goon_nguyen).
npm package: @indieboosting/react
Description: This is a React component for [IndieBoosting.com](https://indieboosting.com) to help you list other indie products on your site and earn money from them.
Author: mrgoonie
Latest version: 1.8.0

# IndieBoosting React Component

This is a React component for [IndieBoosting.com](https://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

```bash
npm i @indieboosting/react
```

### [Alternatives] Vanilla JavaScript Library of IndieBoosting widget

```javascript
<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:

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

3. Use the component in your app:

```javascript
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

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

## Development

### Installation

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

```bash
npm i
# or
bun i
```

### Development

```bash
npm run dev
# or
bun run dev
```

### Build

```bash
npm run build
# or
bun run build
```

### Publish

- Push to `main` to trigger a release.

---

## Credits

- This repository was created by [@mrgoonie](https://github.com/mrgoonie).
- 👉 Follow me on [X](https://x.com/goon_nguyen).