# @liujie2017/weather-widget

> The Weather Widget is a dynamic, React-based web component that leverages GraphQL to fetch weather data for different locations. It's designed to be flexible, allowing integration into any front-end framework.

Latest version **0.0.3** (published 2024-03-10) · 0 weekly downloads

## Install

```sh
npm install @liujie2017/weather-widget
pnpm add @liujie2017/weather-widget
yarn add @liujie2017/weather-widget
bun add @liujie2017/weather-widget
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2024-03-10 |
| First published | 2024-03-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | liujie2017 |

## Links

- npm: https://www.npmjs.com/package/@liujie2017/weather-widget
- npm.io page: https://npm.io/package/@liujie2017/weather-widget

## Dependencies (15)

- [react](https://npm.io/package/react.md) ^18.2.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [graphql](https://npm.io/package/graphql.md) ^16.8.1
- [numeral](https://npm.io/package/numeral.md) ^2.0.6
- [date-fns](https://npm.io/package/date-fns.md) ^3.3.1
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.15.12
- [@apollo/client](https://npm.io/package/@apollo/client.md) ^3.9.6
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.4
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.11.0
- [graphql-request](https://npm.io/package/graphql-request.md) ^6.1.0
- [react-apexcharts](https://npm.io/package/react-apexcharts.md) ^1.4.1
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.15.12
- [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^5.25.0
- [@r2wc/react-to-web-component](https://npm.io/package/@r2wc/react-to-web-component.md) latest

## Recent versions

- 0.0.3 (latest) — 2024-03-10
- 0.0.2 — 2024-03-10
- 0.0.1 — 2024-03-10

## README

# Weather Widget (Front-end)

The Weather Widget is a dynamic, React-based web component that leverages GraphQL to fetch weather data for different locations. It's designed to be flexible, allowing integration into any front-end framework.

## Key features

- GraphQL Data Fetching: Utilizes @tanstack/react-query and graphql-request for efficient data fetching with GraphQL. The data fetch interval is set to every 900 seconds, ensuring up-to-date weather information.
- Caching: Implements caching mechanisms to reduce network requests and load data quickly, enhancing the user experience.
- Framework Agnostic: As a React-based web component, it can be seamlessly integrated into any framework-based front-end, providing versatility in development.
- Theme Support: Adopts the same theme definition as MUI (Material-UI), allowing for easy customization and consistency across your application.
- Location Customization: Users can specify latitude and longitude to fetch weather data for different locations, offering global weather information at your fingertips.
- Visibility Control: Features attributes to hide and show hourly weather data, giving users control over the information displayed.
- Unit Testing: Comes with main unit tests added, ensuring reliability and stability of the widget.
- CDN and NPM Support: The Weather Widget has been deployed to npm for easy installation and CDN via jsFiddle for quick integration.

## Installation

The Weather Widget has been deployed to npm for easy installation and CDN via jsFiddle for quick integration. Here are two ways to use it:

### Via npm

To install the Weather Widget via npm, run the following command in your project directory:

````javascript
npm i @liujie2017/weather-widget@latest
```javascript

Then, you can import and use the widget in your React application:

```javascript
import { green, purple } from "@mui/material/colors";
import "@liujie2017/weather-widget"

import "./App.css";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      ["weather-widget"]: any;
    }
  }
}

function App() {
  const themePurple = {
    palette: {
      primary: {
        main: purple[500],
      },
      secondary: {
        main: green[500],
      },
      warning: {
        main: purple[500],
        light: purple[100],
      },
    },
  };
  return (
    <>
     <weather-widget latitude={-40} longitude={74} theme={JSON.stringify(themePurple)}></weather-widget>
    </>
  );
}

export default App;
````

### Via CDN (jsFiddle)

For quick prototyping or integration without npm, you can use the Weather Widget directly in your HTML through a CDN provided by jsFiddle. Include the following script tag in your HTML file:

```html
<script src="https://cdn.jsdelivr.net/npm/@liujie2017/weather-widget@0.0.1/dist/index.es.min.js"></script>
```

After including the script, you can use the widget in your HTML as follows:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="root"></div>
    <weather-widget
      latitude="90"
      longitude="89"
      theme='{
        "palette":{
          "primary":{
              "main":"#917ca9"
          },
          "secondary":{
              "main":"#a4bc8a"
          },
          "warning":{
              "main":"#917ca9",
              "light":"#bcaacf"
          }
        }
    }'
    ></weather-widget>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@liujie2017/weather-widget@0.0.1/dist/index.es.min.js"
    ></script>
  </body>
</html>
```

## Customization

The Weather Widget supports several props for customization:

- latitude and longitude: Specify the location to fetch weather data for.
- show: Boolean attribute to control the visibility of hourly weather data.
- theme: Customize the widget's appearance using MUI theme options.

## Local dev

````javascript
npm i
npm run dev
```javascript
````

---
_Source: https://npm.io/package/@liujie2017/weather-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._