Package Exports

react-weather-forecast

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-weather-forecast) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.