react-producthunt

React Components for Product Hunt users.

Requirements

Requires React and a Product Hunt account!

Installation

yarn add react-producthunt
# or
npm install --save react-producthunt

Components

1. Ship Widget Component

The Ship widget is a little bubble that appears on the bottom left or bottom right of the page that lets you capture email subscribers. See more about Ship at https://www.producthunt.com/ship.

React Product Hunt

ES6 import

import { ShipWidget } from "react-producthunt";

JSX (example)

<ShipWidget appId={12345} position="bottomLeft">

Props

  • appId: Number

    • Default: No default
    • Options: You can find your App ID in your Ship dashboard at a URL like this:

      https://www.producthunt.com/my/upcoming/[your-upcoming-product]/embed

  • position: String

    • Default: "bottomLeft"
    • Options: "bottomLeft" or "bottomRight"

2. Badge Component

A badge component based off of LinkedIn's Badges that you can put on your site to show off your Product Hunt profile.

Light Badge

React Product Hunt

Dark Badge

React Product Hunt

ES6 import

import { Badge } from "react-producthunt";

JSX (example)

<Badge username="thomaswangio" darkMode={true}>

Props

  • username: String

    • Default: No default
    • Options: Any Product Hunt username!

  • darkMode: Boolean

    • Default: false
    • Options: true or false

Future

This package is open for PR's of any kind! There's room for many creative components using the Product Hunt API. See the Product Hunt API GitHub Repo for their starter kit and more references on what data you can pull.

Makers Festival

This package was made for Product Hunt's Makers Festival 2019 - API Edition.

Voting is open for project categories from June 17-23 here: Product Hunt Maker Fest Voting . Give it a vote, if you want ?

GitHub