npm: package manager

    react-forecast-query
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.1 • Public • Published

    react-forecast-query

    A simple higher order component capable of injecting weather information from open weather api into a component

    Example of use

    <div>
        <input value={state.value} onInput={e => this.setState({ value: (e.target as HTMLInputElement).value })} />
        <button onClick={() => this.setState(prevState => ({ apiKey: prevState.value }))}>Test component</button>
        {state.apiKey && (
            <WeatherDisplay 
                apiKey={state.apiKey}
                label="Cloudy weather measurements"
                query={['clouds', 'cloudy']}
                by="hour"
                loadingComponent={() => <div>Loading...</div>}
                setup={forecast => forecast
                    .at(today, fourDaysFromNow)
                    .around(50.08804, 14.42076)
                    .units('metric')
                    .language('cz')}
            />
        )}
    </div>

    Example of how to define injected component

     
    import React, { FunctionComponent } from "react";
    import { InjectedForecastResults } from "react-forecast-query";
    import weatherEnhancer from "react-forecast-query";
     
    export interface WeatherDisplayProps {
        label: string;
    }
     
    const WeatherDisplay: FunctionComponent<WeatherDisplayProps & InjectedForecastResults> = props => (
        <section>
            <label>{props.label}</label>
            <ul>
                {props.data.clouds?.map(clouds => (
                    <li>
                        {clouds.date.toDateString()} {clouds.date.toTimeString()} - {clouds.value}
                    </li>
                ))}
            </ul>
            <ul>
                {props.data.cloudy?.map(weather => (
                    <li>
                        <img src={props.forecast.icon(weather.icon)} />
                        <div>
                            {weather.description}
                        </div>
                    </li>
                ))}
            </ul>
        </section>
    );
     
    export default weatherEnhancer(WeatherDisplay);
     

    Use of the component

    Use setup props to add location, units, language and dates, then define a string list of information you want to receive.

    List of information is derived from ".list()" function in forecast-query.

    "By" parameter refers to how descriptive the list should be ("hour" delivers hourly weather updates, "day" daily ones).

    "loadingComponent" will display whatever component you want when the api is loading information.

    Changes since 0.1.0

    Added error component

    Changes since 0.1.1

    Fix error component error reporting

    Changes since 0.2.0

    Add support for gps geolocation in browser.

    Example of use

     
    <WeatherDisplay 
        apiKey={state.apiKey}
        label="Cloudy weather measurements"
        query={['clouds', 'cloudy']}
        by="hour"
        loadingComponent={() => <div>Loading...</div>}
        errorComponent={props => {
            console.error(props.error);
            return <div>Error!</div>
        }}
        geo // Try and get geolocation
        updateGeo={1} // Updates every minute
        setup={forecast => forecast
            .at(today, fourDaysFromNow)
            .units('metric') // No location setup needed
            .language('cz')}
    />
     

    Changes since 0.2.1

    Fixed a bug in typing of enhancer concerning Component class.

    More information

    For more information about weather prediction from open weather api please visit: https://www.npmjs.com/package/forecast-query

    If you find any bug or have an idea of how to improve this package, please file in an issue or a pull request

    Install

    npm i react-forecast-query

    DownloadsWeekly Downloads

    1

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    19.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • jindra12