{"id":20159450,"url":"https://github.com/farahat80/react-open-weather","last_synced_at":"2025-04-09T05:11:10.538Z","repository":{"id":38107662,"uuid":"83323979","full_name":"farahat80/react-open-weather","owner":"farahat80","description":"React open weather is a React Component loading forecast data from Various weather providers (currently OpenWeather, WeatherBit and VisualCrossing)","archived":false,"fork":false,"pushed_at":"2024-09-17T09:17:17.000Z","size":4205,"stargazers_count":118,"open_issues_count":14,"forks_count":66,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T04:04:13.234Z","etag":null,"topics":["apixu-api","openweathermap","react","visualcrossingweather","weather","weather-icons","weatherbit","widget"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/farahat80.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-27T15:13:05.000Z","updated_at":"2025-03-29T18:25:06.000Z","dependencies_parsed_at":"2024-10-13T06:33:53.965Z","dependency_job_id":"a546c59a-0fb9-4fb5-a749-b6ff41006003","html_url":"https://github.com/farahat80/react-open-weather","commit_stats":{"total_commits":288,"total_committers":24,"mean_commits":12.0,"dds":"0.29513888888888884","last_synced_commit":"ade11018b49ad71f14eb5c9affdab17cfc10c9d0"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farahat80%2Freact-open-weather","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farahat80%2Freact-open-weather/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farahat80%2Freact-open-weather/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farahat80%2Freact-open-weather/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/farahat80","download_url":"https://codeload.github.com/farahat80/react-open-weather/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980837,"owners_count":21027808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apixu-api","openweathermap","react","visualcrossingweather","weather","weather-icons","weatherbit","widget"],"created_at":"2024-11-14T00:08:10.827Z","updated_at":"2025-04-09T05:11:10.511Z","avatar_url":"https://github.com/farahat80.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Open Weather\n\n---\n\n[![NPM Package](https://github.com/farahat80/react-open-weather/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/farahat80/react-open-weather/actions/workflows/npm-publish.yml)\n\n[![Coverage Status](https://coveralls.io/repos/github/farahat80/react-open-weather/badge.png?branch=master)](https://coveralls.io/github/farahat80/react-open-weather?branch=master)\n\n[![Npm package total downloads](https://badgen.net/npm/dt/react-open-weather)](https://npmjs.com/package/react-open-weather)\n\n\nReact open weather is a React Component loading forecast data from [OpenWeather API](https://openweathermap.org), [WeatherBit](https://www.weatherbit.io/) and [Visual Crossing API](https://www.visualcrossing.com/weather-api).\n\n![Without Forecast](https://gblobscdn.gitbook.com/assets%2F-LHDmRJGuDYmiafAZxRf%2F-LKWsPRjgUAoeOiA5r0T%2F-LKWsUDUkizG0yD1Sw-I%2Frw2.png?alt=media\u0026token=38214fad-2c8f-4d5e-b819-07d6ee511247=50x)\n\n![With Forecast](https://gblobscdn.gitbook.com/assets%2F-LHDmRJGuDYmiafAZxRf%2F-LKWsZMkGEBGfuD_Vhg8%2F-LKWscTt6oVePvCdhYts%2Frw1.png?alt=media\u0026token=be8eae45-1340-4351-994c-54d08270a081)\n\n# Version 1\n\nThe component has been fully refactored and now the UI presentation is completely decoupled from the weather provider to allow using any data sources for weather, the component currently comes with 2 weather providers (WeatherBit and OpenWeather), you can create your own provider easily and provide data to the component, the two providers are built as custom react hooks\n\n- WeatherBit provider (useWeatherBit)\n- OpenWeather provider (useOpenWeather)\n- Visual Crossing provider (useVisualCrossing)\n- Removed the dependency on the weather icon library in favor of SVG icons\n- Removed the dependency on momentjs\n- Allow custom theming to style the component with your colors\n- Fixed some major issues from version 0.6\n\nMore providers to be added in the future, feel free to open a pull request with any weather providers that allow a free plan.\n\n##### For verion 0.6 please find the old read me here [v0.6 readme](https://github.com/farahat80/react-open-weather/blob/master/README_0.6.md)\n\n### Dependencies\n\n- React 16+\n\n### Installation\n\n---\n\nFirst you will need to register an account on OpenWeather, WeatherBit or Visual Crossing to obtain an API key\n\nNext, in your project directory run:\n\n```sh\n$ npm install react-open-weather\n```\n\n#### Usage with OpenWeather\n\n```jsx\nimport ReactWeather, { useOpenWeather } from 'react-open-weather';\n\nconst App = () =\u003e {\n  const { data, isLoading, errorMessage } = useOpenWeather({\n    key: 'YOUR-API-KEY',\n    lat: '48.137154',\n    lon: '11.576124',\n    lang: 'en',\n    unit: 'metric', // values are (metric, standard, imperial)\n  });\n  return (\n    \u003cReactWeather\n      isLoading={isLoading}\n      errorMessage={errorMessage}\n      data={data}\n      lang=\"en\"\n      locationLabel=\"Munich\"\n      unitsLabels={{ temperature: 'C', windSpeed: 'Km/h' }}\n      showForecast\n    /\u003e\n  );\n};\n```\n\n#### Usage with WeatherBit\n\n```js\nimport ReactWeather, { useWeatherBit } from 'react-open-weather';\n\nconst { data, isLoading, errorMessage } = useWeatherBit({\n  key: 'YOUR-API-KEY',\n  lat: '48.137154',\n  lon: '11.576124',\n  lang: 'en',\n  unit: 'M', // values are (M,S,I)\n});\n```\n\n#### Usage with Visual Crossing\n\n```js\nimport ReactWeather, { useVisualCrossing } from 'react-open-weather';\n\nconst { data, isLoading, errorMessage } = useVisualCrossing({\n  key: 'YOUR-API-KEY',\n  lat: '48.137154',\n  lon: '11.576124',\n  lang: 'en',\n  unit: 'metric', // values are (metric,us,uk)\n});\n```\n\n#### Custom styling\n\n```jsx\nconst customStyles = {\n\tfontFamily:  'Helvetica, sans-serif',\n\tgradientStart:  '#0181C2',\n\tgradientMid:  '#04A7F9',\n\tgradientEnd:  '#4BC4F7',\n\tlocationFontColor:  '#FFF',\n\ttodayTempFontColor:  '#FFF',\n\ttodayDateFontColor:  '#B5DEF4',\n\ttodayRangeFontColor:  '#B5DEF4',\n\ttodayDescFontColor:  '#B5DEF4',\n\ttodayInfoFontColor:  '#B5DEF4',\n\ttodayIconColor:  '#FFF',\n\tforecastBackgroundColor:  '#FFF',\n\tforecastSeparatorColor:  '#DDD',\n\tforecastDateColor:  '#777',\n\tforecastDescColor:  '#777',\n\tforecastRangeColor:  '#777',\n\tforecastIconColor:  '#4BC4F7',\n};\n\n\t\t\u003cReactWeather\n\t\t\ttheme={customStyles}\n\t\t\t...\n\t\t/\u003e\n```\n\n## useOpenWeather, useWeatherBit and useVisualCrossing options\n\n| Option | Description                                                                                                                               |\n| ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| key    | your api key from the openweather, weatherbit or visual crossing websites                                                                 |\n| lon    | longitude of the location                                                                                                                 |\n| lat    | latitude of the location                                                                                                                  |\n| unit   | the unit will be passed to the openweather, weatherbit or visualcrossing \"units\" property, please check their documentation for more info |\n\n## UI Component Props\n\n| Props         | Options          | Default                                 | Description                                                                                                                                    |\n| ------------- | ---------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| data          | -                | -                                       | the data object provided from the provider hooks or your custom data provider (check the customization section below to provide your own data) |\n| isLoading     | true, false      | false                                   | boolean to determine if the component shows a loader until data is ready                                                                       |\n| errorMessage  | -                | -                                       | error message string                                                                                                                           |\n| lang          | \"en\", \"de\", \"es\" | \"en\"                                    | the language to show \"humidity\" and \"wind speed\", feel free to open a PR to lang.js to add more languages                                      |\n| locationLabel | -                | -                                       | The name of the location or city to show in the component                                                                                      |\n| unitsLabels   | -                | { temperature: 'C', windSpeed: 'Km/h' } | the labels to be used for temperature and windspeed                                                                                            |\n| showForecast  | true, false      | true                                    | whether or not to show the forecast bottom part of the component                                                                               |\n\n## Customizations\n\nYou can always create your own data provider, it can be a react hook or any other implementation as long as it follows the schema the component is expecting like below\n\n```js\n    const data = {\n      forecast: [\n          {\n            date: 'Fri 27 November',\n            description: 'Clear',\n            icon:'SVG PATH',\n            temperature: { min: '-0', max: '6' },\n            wind: '2',\n            humidity: 60,\n          },\n          {\n            date: 'Sat 28 November',\n            description: 'Clouds',\n            icon:'SVG PATH',\n            temperature: { min: '-1', max: '6' },\n            wind: '3',\n            humidity: 67,\n          },\n          .....\n      ],\n      current: {\n          date: 'Fri 27 November',\n          description: 'Clear',\n          icon:'SVG PATH',\n          temperature: { current: '-2', min: -3, max: 1 },\n          wind: '2',\n          humidity: 90,\n        },\n    };\n```\n\n## Translate Wind and Humidity\n\nIn lang.js you can implement the necessary translation, to correctly translate Wind and Humidity into other languages, if you want to implement another language, this is where you can do it. Remember to make a Pull request to share it with everyone\n\n```Javascript\n\nlangText: {\n\nen: { Wind: 'Wind', Humidity: 'Humidity',},\n\nes: { Wind: 'Viento', Humidity: 'Humedad',}\n\n}\n\n```\n\nnow in order to format the dates according to your locale you will need to import the locale from [dayjs](https://github.com/iamkun/dayjs) and in your code before rendering the component you will need to set the locale as follows\n\n```js\nimport 'dayjs/locale/de';\nimport dayjs from 'dayjs';\n\n// then before using the hooks you will need to set the local\ndayjs.locale('de');\n```\n\n## Contribution\n\nIf you want to contribute to the project and make it better, your help is very welcome, create a pull request with your suggested feature/bug fix/ enhancements.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarahat80%2Freact-open-weather","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarahat80%2Freact-open-weather","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarahat80%2Freact-open-weather/lists"}