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

Versions 1.* (deprecated)

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

Props

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