react-weather-forecast

react-weather-forecast

Collection of react components used to display weather at any location.

List of used components

• WeatherList - lists weather-related values such as rain or snow
• WeatherConditions - lists single or multiple (boolean param list) weather phenomena with localized description and icons
• WeatherGraph - experimental english only simple graph display
• weatherEnhancer - injects weather information into any of your compoments (props added: data)

Examples of use

Component setup

// Set up global configuration for weather components
<WeatherGlobal
    apiKey={state.setApiKey}
    by="day"
    from={new Date()}
    to={threeDaysLater}
    loadingHandler={() => <div>Loading...</div>}
    errorHandler={() => <div>Error!</div>}
    storage={localStorage}
    dateHandler={date => <span>{date.toLocaleDateString() + " " + date.toLocaleTimeString()}</span>}
    units="metric"
    lang="cz"
>
    {/* List how much it rains in Prague */}
    {<WeatherList kind="names" names={["Prague"]} type="rain" />}
    {/* List what kind of weather is in Prague */}
    {<WeatherConditions kind="geo" lat={50.073658} lon={14.418540} list />}
    {/* List only cloudy types of weather */}
    {<WeatherConditions kind="geo" lat={50.073658} lon={14.418540} type="Clouds" />}
    {/* List temperature in Prague */}
    {<WeatherGraph kind="ids" ids={[3067696]} type="clouds" label="Temperature" />}
    {/* List temperature with custom extended component */}
    {<ExtendedTemperatureInfo label="Temp" />}
    {/* List weather phenomena with custom extended component */}
    {<ExtendedWeatherInfo label="Weather list" />}
</WeatherGlobal>

Enhancer use

export interface ExtendedTemperatureProps extends InfoQueryEnhancerProps {
    label: string;
}

const ExtendedTemperature: FunctionComponent<ExtendedTemperatureProps> = props => (
    <div>
        <h3>
            {props.label}
        </h3>
        <ul>
            {props.data.map(result => <li>{result.value}</li>)}
        </ul>
    </div>
);

export default weatherEnhancer(ExtendedTemperature, {
    kind: 'names',
    names: ['Prague', 'cz'],
    type: 'temp_max',
});

forecast-query

For non-react use refer to package https://www.npmjs.com/package/forecast-query

If you have any ideas or have discovered any bugs, please report them, I will take a look as soon as possible.