open-index/open-npm huggingface dataset:
npm package: @shine-api/total-home-score
Description: A react component for Total Home Score
Author: Solaria Labs
Latest version: 2.1.3

# Total Home Score - React Component
A React component for rendering Total Home Score livability scores, powered by the [Shine Api](https://developers.solarialabs.com).

## Usage 
To leverage the React component, install the following package from `npm`:

```bash
npm install @shine-api/total-home-score
```

Once installed, this component can be leveraged in your app by passing in the `apiKey` from your Shine Api App and the `lat` and `lon` coordinates for the desired location to display information for.

If your app needs to process the score results directly, such as hiding the component entirely if no scores are present, you can pass in a `callback` function to the component. This function will get called with the scores or an empty array if no scores were returned from the API.

```javascript
import React from 'react';

import TotalHomeScore from '@shine-api/total-home-score';
import '@shine-api/total-home-score/dist/main.css';

const apiKey = 'API_KEY_FROM_SHINE_API';
const lat = 42;
const lon = -71;

const callback = scores => {
  // Process scores directly
};

const ExampleApp = () => (
  <div>
    <TotalHomeScore apiKey={apiKey} lat={lat} lon={lon} callback={callback} />
  </div>
);
```
npm package: @shine-api/total-home-score-js
Description: A plain javascript widget for Total Home Score
Author: Solaria Labs
Latest version: 2.0.0

# Total Home Score - Plain Javascript Component
A plain javascript component for rendering Total Home Score livability scores, powered by the [Shine Api](https://developers.solarialabs.com).

## Usage
To leverage the plain javascript component, the following two script tags to your page, and a div container for the widget to get added to:

```html
<div id="widget-container"></div>
<script lang="text/javascript">
  TotalHomeScore = {
    apiKey: 'API_KEY_FROM_SHINE_API',
    lat: 42,
    lon: -71,
    id: "widget-container"
  }
</script>
<script src="<path_to_js_file>"></script>
```

The script tags will import the javascript component and place dom elements inside of the given `widget-container` element.