reactjs-weather

Open source widget for displaying weather for today and the next three days. The widget are using SMHI (The Swedish Meteorological and Hydrological Institute) as base for getting the forecast, but we also have our own API as data provider.

Data availability

• To get world wide weather data, you must provide the name of the city so we can do the lookup. If you are using the city name as the identifier, the data will be fetched from our weather api.

• If you are using latitude and longitude for getting the data, the widget will use SMHI to fetch data. NOTE that by using lat/lon, the data is limited to the PMP area which is approximately around the nordic countries.

Feedback

This widget was created with a basic usage in mind. If you have any suggestions, or feedback, we really want to know how we can improve or extend the functionality. Contact us here.

Consume our API

If you want to build your own solution, we have a free API for getting free weather data for any city, read more here.

Default widget

Image showing example widget with a weather forecast for Copenhagen, with default design.

Paris weather with custom colors

All props available

interface IReactWeatherProps {
  lon?: number; // Only for PMP area
  lat?: number; // Only for PMP area
  city?: string; // World wide data
  unit?: "metric" | "imperial";
  widgetStyle?: any;
  borderColor?: string;
  apiKey?: string;
  iconTheme?: "DARK" | "LIGHT";
}

Download

npm i reactjs-weather

Consume it

No props provided

By using it without passing in any props, the widget will fetch the latitude and longitude using navigator.geolocation. If the browser is not approved to get the current location, the widget won't show.

import { ReactWeather } from "reactjs-weather";

<ReactWeather />;

City name provided

If you provide city to the widget, it will override the latitude and longitude props and do a look up for the city name and get the forecast.

import { ReactWeather } from "reactjs-weather";

<ReactWeather city="New york" />;

With longitude and latitude

If wanted, there is the possibility to provide the widget with latitude and longitude and then we will use the SMHI API to try to fetch the forecast.

import { ReactWeather } from "reactjs-weather";

// Copenhagen coordinates
<ReactWeather lat={55.6761} lon={12.5683} />;

Use imperial system

By default, Celsius and m/s is the units we use. But, the widget has support for Farenheit and mp/h as well. By setting unit to "imperial" the widget will convert the values.

<ReactWeather unit="imperial" />

Change color of the widget

We now support changing color of the widget, such as text color, border, background and icons.

• widgetStyle should be a style object for the widget
• borderColor can be both hex or rgba and will change color of all borders
• iconTheme can be LIGHT or DARK (dark is default)

<ReactWeather
  city="paris"
  widgetStyle={{ backgroundColor: "#137cd7", color: "white" }}
  borderColor="#2567db"
  iconTheme="LIGHT"
/>

Google maps API key

If you have Google maps enabled, we can retrieve the city name for you to show in the widget. Set the apiKey to your key. NOTE This is only applicable if you are using lat/lon settings.

<ReactWeather apiKey="YOUR_KEY" />