About

🌦 A simple weather widget created using React.js ☀. This Component loading forecast data from weather providers ⛈ ( Open-Meteo or OpenWeather API). You can enter a specific location or let weather-widget locate the user by itself.

Please check out the demo.

Installation

Just run:

$ npm install @daniel-szulc/react-weather-widget

Using the Open-Meteo provider, you don't need to generate your own API key. Using the OpenWeather provider, you need to register on OpenWeather to get an API key.

Usage examples

import {WeatherWidget} from "@daniel-szulc/react-weather-widget"

const App = () => {
  return (
    <WeatherWidget
        autoLocate="gps"
    />
  );
};

import {WeatherWidget} from "@daniel-szulc/react-weather-widget"

const App = () => {
  return (
    <WeatherWidget
        provider='openWeather'
        apiKey='YOUR-API-KEY'
        location='Warsaw'
        tempUnit="F"
        windSpeedUnit="mps"
        lang="pl"
    />
  );
};

Props

| Props | Options | Default | Description | |-----------------|------------------------------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | apiKey | - | - | (only for openWeather) Your api key from the openweather. | | location | - | - | Your location for weather checking, e.g. "Warsaw". | | lat | - | - | Your latitude of the location for weather checking, e.g. "52.2317". | | lon | - | - | Your longitude of the location for weather checking, e.g. "21.0057". | | autoLocate | "gps", "ip" | - | Automatic user locating. "gps" for geolocation by the browser (requires the user's permission), "ip" for location by IP address. Leave empty if you want to enter a specific location. | | provider | "openWeather", "openMeteo" | "openMeteo" | Name of the weather data provider. | | tempUnit | "C", "F", "K" | "C" | Temperature unit for presenting data. Available are: degrees Celsius, degrees Fahrenheit and Kelvin. | | windSpeedUnit | "mps", "mph", "fps", "kmph" | "kmph" | Speed unit for presenting data. Available are: meters per second, miles per hour, feet per second, kilometers per hour. | | lang | "en", "pl", "de", "es", "ru" | "en" | Interface language and weather provider. You can edit lang.js to add more languages for "Wind", "Humidity" and "FeelsLike". The available languages for the OpenWeather provider are listed at: https://openweathermap.org/current#multi |

Try It

🔗 daniel-szulc.github.io/WeatherWidget