react-producthuntdeprecated

React Components for Product Hunt users

Usage no npm install needed!

<script type="module">
  import reactProducthunt from 'https://cdn.skypack.dev/react-producthunt';
</script>

README

React Product Hunt

React Components for Product Hunt Tweet

React Components for Product Hunt users

NPM JavaScript Style Guide

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.