React Clutch Badge

Example: https://react-clutch-badge.vercel.app/

React Clutch Badge

Unofficial library for easy and performant integration with clutch.co.

• [x] 🔗 Isomorphic (works on every platform - Web (Client, Server), Mobile)
• [x] 🧑🏻‍💻 Only one dependency (cross-fetch)
• [x] 📸 Non-flickering
• [x] 🖼 Not-based on iframe
• [x] 👮🏼‍♂️ Customizable badges
• [x] ⚡️ Ideal for static rendering

Installation

$ yarn add react-clutch-badge
# or

$ npm install --save-dev react-clutch-badge

Usage

With Next.js

import styles from '../styles/Home.module.css'
import { ClutchBadge, getClutchReviewsData } from 'react-clutch-badge'

export default function Home({ clutchData }) {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <ClutchBadge variant="smallLogo" {...clutchData} />
        <ClutchBadge variant="bigLogo" {...clutchData} />

        <ClutchBadge classNamePrefix="custom-small-clutch-badge" variant="smallLogo" {...clutchData} />
        <ClutchBadge classNamePrefix="custom-big-clutch-badge" variant="bigLogo" {...clutchData} />
      </main>
    </div>
  )
}

export async function getStaticProps() {
  return {
    props: {
      clutchData: await getClutchReviewsData({ clutchProfileHandle: 'testscenario' }),
    },
  }
}

License

MIT