π¦ 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.
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.
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 | 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 |