jb-react-weather-widget

Weather widget to use with a React app

Demo

Installation

npm i jb-react-weather-widget

or

yarn add jb-react-weather-widget

Usage

import { WeatherWidget } from "jb-react-weather-widget";

Version 2.*

This versions use openMeteo api, so no tokens neccessary. It also improves on functionality, You should probably use this version.

Props

• units
  mesurement units, temperature (celsius - default, fahrenheit), speed (kmh - default, mph, kn, ms)
• remember
  stores current choice inside local storage, default is false
• refresh
  weather data refetch time in minutes, default is 60
• defaultLocation
  a default place existing on Earth to take measurments from, if not provided a random place gets selected
• theme
  custom theme to override the default one

Versions 1.* (deprecated)

This versions rely on openWeather api. You have to obtain a personal id token from https://openweathermap.org/api

Props

• apiKey (required)
  individual access token required by the api
• longitude (required)
  any valid longitude value
• latitude (required)
  any valid latidute value
• units
  measurment units systtem (metric, imperial), default is metric
• theme
  custom theme to override the default one

Styling

Pass a theme object with your preferred values

const theme = {
  color: {
    font: {
      main: "#fff",
      timer: "#fff",
      bottom: "#fff",
      right: "#fff",
      list: {
        main: "#000",
        hover: "#fff",
      },
    },
    icon: {
      main: "#e040fb",
      right: "#e040fb",
      bottom: "#e040fb",
    },
  },
  bg: {
    main: "#512da8",
    right: "rgba(0,0,0,0.1)",
    bottom: "rgba(0,0,0,0.1)",
    list: {
      main: "#FFF",
      hover: "transparent",
      border: "#ccc",
    },
  },
  spacing: {
    inner: "16px", // The width, height of gaps between inner elements
    outer: "16px", // padding of the container's element
  },
  borderRadius: {
    container: "8px", // you want 0 radius you have to put it explicitly, same below
    element: "8px",
  },
};

License

MIT © jbystronski

See also

Vanilla js version