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