HeyCarson Partner Widgets

Table of Contents

• Installation
• API Key
• Usage
• Developer Widget Options

Installation

CDN

Check JSDelivr for the latest version: https://www.jsdelivr.com/package/npm/@heycarson/widgets. It is recommended to use a specific version.

NPM

npm install @heycarson/widgets

API Key

To generate a public API key, log in to your partner account here, and follow the steps to create a new API key.

Usage

CDN

<!-- HTML Snippet Example -->
<div id='hc-dev-widget'></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@heycarson/[email protected]/dist/developer.css">
<script type='module'>
  import DeveloperWidget from 'https://cdn.jsdelivr.net/npm/@heycarson/[email protected]/dist/developer.js'

  window.addEventListener('DOMContentLoaded', function () {
    const widget = new DeveloperWidget({
      element: document.querySelector('#hc-dev-widget'),
      apiKey: 'YOUR_API_KEY', 
      ratingFrom: '[themes|apps]' // mutually exclusive
    })

    widget.render({
      light: false // optional (default: true)
    })
    
    // use widget.destroy() to unmount it
  })
</script>

NPM

import React, { useEffect, useRef } from 'react'

// import the complete set of widgets
import { DeveloperWidget } from '@heycarson/widgets'
import '@heycarson/widgets/dist/main.css'

// or just the developer widget
import DeveloperWidget from '@heycarson/widgets/dist/developer.js'
import '@heycarson/widgets/dist/developer.css'

ReactJS Example

function App () {
  const refEl = useRef(null)
  const widgetRef = useRef(null)

  // initialize the widget and render it
  useEffect(() => {
    if (!refEl.current) {
      return
    }

    if (!widgetRef.current) {
      widgetRef.current = new DeveloperWidget({
        element: refEl.current,
        apiKey: 'YOUR_API_KEY',
        ratingFrom: '[themes|apps]' // mutually exclusive
      })
    }

    widgetRef.current.render({
      light: false // optional (default: true)
    })

    return () => {
      widgetRef.current?.destroy()
    }
  }, [])

  return (
    // ...
    <div ref={refEl} />
    // ...
  )
}

DeveloperWidget Options

constructor()

{
  element: HTMLElement,
  apiKey: string,
  slug: string
}

| Option | Type | Description | |---------|--------------|-----------------------------------------------------| | element | HTMLElement | The HTML element where the widget will be rendered. | | apiKey | string | Your HeyCarson public API key. | | ratingFrom | string | Pull data from themes or app directory |

.render()

.render can be called multiple times to update the widget.

{
  light: boolean
}

| Option | Type | Description | |---------|---------------|------------------------------------------------------------| | light | boolean (optional) | Set the theme light (true) or dark (false). Default: true. |

.destroy()

none