Nanotechnology Promises Much

    gatsby-source-websitecarbon

    1.1.3 • Public • Published

    gatsby-source-websitecarbon

    Introduction

    Gatsby source for Website Carbon api: https://www.websitecarbon.com/api/.

    Fetch the data for the defined url from the api and lets you use it via StaticQuery.

    NB: This plugin goes hand in hand with : https://www.npmjs.com/package/react-websitecarbon-badge

    Install

    yarn add gatsby-source-websitecarbon

    or

    npm i gatsby-source-websitecarbon

    How to use

    // In your gatsby-config.js
    plugins: [
      {
        resolve: "gatsby-source-websitecarbon",
        options: {
          url: "www.google.com",
        },
      },
    ];
    
    // In your component
    import React from "react"
    import { StaticQuery, graphql } from "gatsby"
    
    const query = graphql`
      query WebsiteCarbonQuery {
        websiteCarbonBadge {
          co2
          percentage
          url
        }
      }
    `
    
    function MyComponent(props: any) {
      return (
        <StaticQuery
          query={query}
          render={data => 
            // If using react-websitecarbon-badge
            <WebsiteCarbonBadge 
              dark={true} 
              co2={data.websiteCarbonBadge.co2} 
              percentage={data.websiteCarbonBadge.percentage} 
            /> 
          }
        />
      )
    }
    
    export default MyComponent

    Install

    npm i gatsby-source-websitecarbon

    DownloadsWeekly Downloads

    5

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    4.76 kB

    Total Files

    4

    Last publish

    Collaborators

    • clementjoye