https://github.com/clement-joye/react-websitecarbon-badge

React component for Website Carbon badge: https://www.websitecarbon.com/badge/
https://github.com/clement-joye/react-websitecarbon-badge

Last synced: 2 months ago
JSON representation

React component for Website Carbon badge: https://www.websitecarbon.com/badge/

• Host: GitHub
• URL: https://github.com/clement-joye/react-websitecarbon-badge
• Owner: clement-joye
• License: mit
• Created: 2022-08-07T16:58:23.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-26T12:35:32.000Z (over 1 year ago)
• Last Synced: 2024-11-07T02:07:02.172Z (3 months ago)
• Language: JavaScript
• Size: 293 KB
• Stars: 12
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-websitecarbon-badge

React component for Website Carbon badge: https://www.websitecarbon.com/badge/. Can be used both for static and dynamic websites.

## Introduction

This React component fits both static and dynamic web apps.

The values on the badge can be set directly via props or fetched from https://www.websitecarbon.com/api/.

If using GatsbyJS, this react component goes hand in hand with: https://www.npmjs.com/package/gatsby-source-websitecarbon

## Install

```bash

npm install react-websitecarbon-badge

```

## How to use

```js

import { WebsiteCarbonBadge } from 'react-websitecarbon-badge';

class MyComponent extends React.Component {

  render() {

    return ;

  }

}

```

## Props

* `dark`: 

  * Boolean

  * Optional. Default `false`

  * Specify to use dark badge version 

* `co2`: 

  * String

  * Optional. Default to empty string

  * Sets the co2/view value. 

* `percentage`: 

  * String 

  * Optional. Default to empty string

  * Sets the ranking percentage value. 

* `url`: 

  * String

  * Optional. Default to empty string

  * Sets the url to fetch data from website carbon api. 

* `lang`: 

  * String

  * optional. Default to '`en`'

  * Sets the default language to use. (Currently supports '`en`' or '`fr`')

*NB: setting co2 and percentage takes precedence over the url, preventing unnecessary api fetch.*

## Examples

```js

```

Fetches data from `www.google.com` via http request if not found in local storage.

```js

```

Uses dark version and sets co2 = 0.12 and percentage = 89%.

```js

```

Uses french as language for the badge.

```js

```

Uses co2 = 0.56 and percentage = 41%, and does not use the url provided.