jb-svelte-weather-widget

Weather widget to use with a Svelte app

Demo

Installation

npm i jb-svelte-weather-widget

or

yarn add jb-svelte-weather-widget

Usage

import { WeatherWidget } from 'jb-svelte-weather-widget';

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

Styling

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
React version