@ayltai/react-weather NPM

react-weather

Gorgeous React components to display weather information based on Material UI.

Category	Measurement
Pipeline
Quality
Coverage
Rating
Security
Miscellaneous

Demo

WeatherBear Screenshot

Installation

npm install @ayltai/react-weather

Usage

// index.jsx
import React from 'react';
import { getWeather, Weather, } from 'react-weather';

const Example = () => {
    const [ weather, setWeather, ] = React.useState({});

    const source = 2; // Weatherbit API
    const unit   = 'si';

    React.useEffect(() => {
        getWeather(22.3080, 113.9185, source, apiKey, 8, 4, 'en-US')
            .then(setWeather)
            .catch(console.error);
    }, []);

    if (weather.currently && weather.hourly && weather.daily) return (
        <>
            <Weather.Currently
                width={320}
                height={160}
                backgroundImageUrl='https://images.unsplash.com/photo-1523643454511-d7e4e5697016?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjI0NDM4fQ'
                location='Hong Kong International Airport, Sky Plaza Road, Chek Lap Kok'
                summaryCurrently={weather.currently ? weather.currently.summary : undefined}
                summaryToday={weather.daily ? weather.daily[0].summary : undefined}
                iconId={weather.currently ? weather.currently.icon : undefined}
                iconType={source}
                temperature={weather.currently ? weather.currently.temperature : undefined}
                temperatureHigh={weather.daily ? weather.daily[0].temperatureHigh : undefined}
                temperatureLow={weather.daily ? weather.daily[0].temperatureLow : undefined}
                humidity={weather.currently ? weather.currently.humidity : undefined}
                windSpeed={weather.currently ? weather.currently.windSpeed : undefined}
                uvIndex={weather.currently ? weather.currently.uvIndex : undefined}
                unit={unit} />
            <Weather.Hourly
                width={320}
                height={160}
                hourly={weather.hourly}
                iconType={source}
                additionalForecast='humidity'
                unit='si' />
            <Weather.Daily
                orientation='vertical'
                date={weather.daily ? new Date(weather.daily[0].time) : undefined}
                summary={weather.daily ? weather.daily[0].summary : undefined}
                iconId={weather.daily ? weather.daily[0].icon : undefined}
                iconType={source}
                temperatureHigh={weather.daily ? weather.daily[0].temperatureHigh : undefined}
                temperatureLow={weather.daily ? weather.daily[0].temperatureLow : undefined}
                humidity={weather.daily ? weather.daily[0].humidity : undefined}
                precipProbability={weather.daily ? weather.daily[0].precipProbability : undefined}
                precipIntensity={weather.daily ? weather.daily[0].precipIntensity : undefined}
                windSpeed={weather.daily ? weather.daily[0].windSpeed : undefined}
                windSpeedSuffix='km/h'
                uvIndex={weather.daily ? weather.daily[0].uvIndex : undefined}
                unit={unit} />
        </>
    );

    return <div />;
};

`getWeather` parameters

Name	Type	Default value	Description
`source`	Number		Weather API source
`apiKey`	String		API key for specific weather source
`latitude`	Number		Latitude of weather location
`longitude`	Number		Longitude of weather location
`hours`	Number	`8`	Number of future hours to forecast. Must be between 1 (inclusive) and 12 (inclusive).
`days`	Number	`4`	Number of future days to forecast. Must be between 1 (inclusive) and 4 (inclusive).
`locale`	String	`en-US`	Locale of weather summaries

Weather API source

Source	Value
Dark Sky	0
AccuWeather	1
Weatherbit	2

API key

Source	Default value
Dark Sky	`process.env.REACT_APP_DARK_SKY_API_KEY`
AccuWeather	`process.env.REACT_APP_ACCU_WEATHER_API_KEY`
Weatherbit	`process.env.REACT_APP_WEATHER_BIT_API_KEY`

⚠ Note that you are not allowed to make Dark Sky API calls from client-facing code. However, it is possible to use it native applications such as Electron.

`<Weather.Currently />` props

Name	Type	Required	Default value	Description
`width`	Number	Yes		Width of this component in pixels
`height`	Number	Yes		Height of this component in pixels
`location`	String	No		A string representing the weather location
`summaryCurrently`	String	No		A string that summaries the current weather condition
`summaryToday`	String	No		A string that summaries the weather today
`iconId`	String or Number	No		A weather source specific string or number representing the weather icon
`iconType`	Number	No	`0` (Dark Sky)	The weather source type
`temperature`	Number	No		The current temperature
`temperatureHigh`	Number	No		The expected maximum temperature of today
`temperatureLow`	Number	No		The expected minimum temperature of today
`humidity`	Number	No		The current humidity
`windSpeed`	Number	No		The current average wind speed
`uvIndex`	Number	No		The current UV index
`unit`	String	No	`si`	The unit of the values supplied to this component

`<Weather.Hourly />` props

Name	Type	Required	Default value	Description
`className`	String	No		A string representing the name of CSS style to apply to this component
`width`	Number	Yes		Width of this component in pixels
`height`	Number	Yes		Height of this component in pixels
`hourly`	Object array	No		The `hourly` object array returned by calling `getWeather()`
`chartLabel`	String	No	`Hourly forecast`	A string representing the hourly weather chart title
`iconType`	Number	No	`0` (Dark Sky)	The weather source type
`temperatureLabel`	String	No	`🌡`	The prefix prepended to `temperatureHigh` and `temperatureLow` in tooltip
`humidityLabel`	String	No	`🌢`	The prefix prepended to `humidity`
`precipitationLabel`	String	No	`🌧`	The prefix prepended to `precipProbability` and `precipIntensity`
`windSpeedLabel`	String	No	`💨`	The prefix prepended to `windSpeed` in tooltip
`windSpeedSuffix`	String	No	`km/h`	The suffix appended to `windSpeed`; typically you could use `km/h`
`uvIndexLabel`	String	No	`☀`	The prefix prepended to `uvIndex` in tooltip
`additionalForecast`	String	No	`humidity`	Show additional weather information as the 3rd line in the weather chart
`unit`	String	No	`si`	The unit of the values supplied to this component
`timeFormat`	String	No	`ha`	A string representing the hour format

`<Weather.Daily />` props

Name	Type	Required	Default value	Description
`orientation`	String	No	`horizontal`	The layout of this component, either `horizontal` or `vertical`
`date`	Number	No		The weather date used to display the weekday
`summary`	String	No		A string representing the expected weather condition of this day
`iconId`	String or Number	No		A weather source specific string or number representing the weather icon
`iconType`	Number	No	`0` (Dark Sky)	The weather source type
`temperatureHigh`	Number	No		The expected maximum temperature of this day
`temperatureHighLabel`	String	No	`🔥`	The prefix prepended to `temperatureHigh`
`temperatureLow`	Number	No		The expected minimum temperature of this day
`temperatureLowLabel`	String	No	`❄`	The prefix prepended to `temperatureLow`
`temperatureLabel`	String	No	`🌡`	The prefix prepended to `temperatureHigh` and `temperatureLow` in tooltip
`humidity`	Number	No		The expected humidity of this day
`humidityLabel`	String	No	`🌢`	The prefix prepended to `humidity`
`precipProbability`	Number	No		The probability of having any precipitation on this day
`precipIntensity`	Number	No		The expected precipitation intensity of this day
`precipLabel`	String	No	`🌧`	The prefix prepended to `precipProbability` and `precipIntensity`
`windSpeed`	Number	No		The expected wind speed of this day
`windSpeedLabel`	String	No	`💨`	The prefix prepended to `windSpeed` in tooltip
`windSpeedSuffix`	String	No		The suffix appended to `windSpeed`; typically you could use `km/h`
`uvIndex`	Number	No		The expected UV index of this day
`uvIndexLabel`	String	No	`☀`	The prefix prepended to `uvIndex` in tooltip
`unit`	String	No	`si`	The unit of the values supplied to this component

`iconType`

Source	Value
Dark Sky	0
AccuWeather	1
Weatherbit	2

`unit`

Value	Description
`si`	SI units
`imperial`	Imperial units

`timeFormat`

Value	Description
`HH`	24-hour format, e.g. 18
`ha`	12-hour format, e.g. 6pm

`additionalForecast`

Value	Description
`humidity`	Show humidity information as the 3rd line in the weather chart
`windSpeed`	Show wind speed information as the 3rd line in the weather chart
`uvIndex`	Show UV index information as the 3rd line in the weather char