Nonprofit Pizza Maker

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

    0.0.1 • Public • Published

    react-weather-forecast

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

    List of used components

    1. WeatherList - lists weather-related values such as rain or snow
    2. WeatherConditions - lists single or multiple (boolean param list) weather phenomena with localized description and icons
    3. WeatherGraph - experimental english only simple graph display
    4. 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.

    Install

    npm i react-weather-forecast

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    37.6 kB

    Total Files

    33

    Last publish

    Collaborators

    • jindra12