jb-react-weather-widget
Weather widget to use with a React app
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