clearweatherapi-react

Clear Weather API React

Clear Weather API transforms OpenWeather Map OneCall data into human-readable code so you can get to building apps faster.

This library was built to make it easier to use the ClearWeather API with React JS.

Learn more about Clear Weather API.

Features

• Data Transformation (Premium)
• Avoid hitting rate limits with Caching (Premium)
• Cool Weather Icons (Premium)
• Limit errors with types for all weather data
• This package will make it smooth and easy to develop

Getting Started

You need an Open Weather Map API key to use this library, and you can get one by signing up at Open Weather Map.

Activate your One Call 3.0 subscription at Open Weather Map API.

You can get more information about the One Call API at Open Weather Map One Call.

Installation

npm

npm install clearweatherapi-react

yarn

yarn add clearweatherapi-react

Usage

options object to be passed to the the custom hook of your choice

const options = {
  openWeatherApiKey: 'YOUR_OPENWEATHER_API_KEY',
  userId: 'YOUR-CLEARWEATHERAPI-USERID',
  coords: {
    latitude: '34',
    longitude: '-118',
  },
};

All weather hooks take an options object as an argument and return the weather data, loading, and an error state.

To get more information about the weather data for each hook check out our docs.

useCurrentWeather

import { useCurrentWeather } from 'clearweatherapi-react';

const App = () => {
  const { current, error, loading } = useCurrentWeather(options);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h2>{current.temp}</h2>
    </div>
  );
};

useHourlyWeather

import { useHourlyWeather } from 'clearweatherapi-react';

const { hourly, error, loading } = useHourlyWeather(options);

useDailyWeather

import { useDailyWeather } from 'clearweatherapi-react';

const { daily, error, loading } = useDailyWeather(options);

useOneCallWeather

• oneCall contains current, hourly, daily and alerts weather data

import { useOneCallWeather } from 'clearweatherapi-react';

const { oneCall, error, loading } = useOneCallWeather(options);

useAlerts

import { useAlerts } from 'clearweatherapi-react';

const { alerts, error, loading } = useAlerts(options);

Icons

Icons are available for premium users and can be found in each weather data object.

If you are not a premium user you can get more information on how to fetch the icons here.

options

Name	Type	Required	Description
openWeatherApiKey	string	true	Your OpenWeatherMap API key. You can get a free API key here.
userId	string	true	Your Clear Weather API user ID Sign up at Clear Weather API to get your free user id.
premium	boolean	false	With a subscription, if set to true you will have access to formatted data, caching and animated or static SVG icons.
cacheTime	number	false	The time in seconds to cache data for, the maximum time is 43200 (12 hours) at a time (Premium).
units	string	false	The units to use for the data. Default is imperial. Options are metric, imperial, and standard.
version	string	false	The version of the API to use, the default is 3.0 options are 2.5 and 3.0

                                 |