Skip to content

Commit

Permalink
release: optimizing and preparing release
Browse files Browse the repository at this point in the history
  • Loading branch information
@farahat80
farahat80 committed Dec 10, 2020
1 parent 335e668 commit 444a562
Show file tree
Hide file tree
Showing 30 changed files with 18,790 additions and 15,855 deletions.
2 changes: 1 addition & 1 deletion .travis.yml
View file
@@ -1,7 +1,7 @@
language: node_js

node_js:
- 13.2.0
- 10.15.3

install:
- npm install
Expand Down
290 changes: 129 additions & 161 deletions README.md
View file
Expand Up @@ -3,215 +3,183 @@
---

[![Build Status](https://travis-ci.org/farahat80/react-open-weather.svg?branch=master)](https://travis-ci.org/farahat80/react-open-weather)

[![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)

[![Code Climate](https://codeclimate.com/github/farahat80/react-open-weather/badges/gpa.svg)](https://codeclimate.com/github/farahat80/react-open-weather)

React open weather is a React Component loading forecast data from [OpenWeather API](https://openweathermap.org).
React open weather is a React Component loading forecast data from [OpenWeather API](https://openweathermap.org) and [WeatherBit](https://www.weatherbit.io/).

# Version 1

Features Implemented:
The component has been fully refactored and now the UI presenation 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 provider are built as a custom react hooks

1. Showing Today Weather
2. Showing 5 days Weather Forecast
- WeatherBit provider (useWeatherBit)
- OpenWeather provider (userOpenWeather)
- Removed the dependency on the weather icon library in favor of SVG icons
- Removed the dependency on momentjs
- Allow custom themeing to style the component with your colors
- Fixed some major issues from version 0.6

The Component development is in progress and will contain more features in the future versions.
More providers to be added in the future, feel free to open a pull request with any weather providers that allow a free plan.

##### 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)

### Demo & Docs

- [Demo](https://react-open-weather.gitbook.io/project/)

- [Docs](https://react-open-weather.gitbook.io/project/)

### Dependencies

- [Moment JS](https://momentjs.com/)
- React
- React 16+

### Installation

---

First you will need to register and account on OpenWeather website and obtain an [API key](https://openweathermap.org/price)
First you will need to register and account on OpenWeather or WeatherBit to obtain an API key

Next, in your project directory run:

```sh
$ npm install react-open-weather
$ npm install react-open-weather
```

you will need to add link to weather icons css file in your html file or require it in your build process
[Weather Icons](https://erikflowers.github.io/weather-icons/), or you can directly use the CDN.

```html
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css"
type="text/css"
/>
#### Usage with OpenWeather

```jsx
import ReactWeather, { useOpenWeather } from 'react-open-weather';

const App = () => {
const { data, isLoading, errorMessage } = useOpenWeather({
key: 'YOUR-API-KEY',
lat: '48.137154',
lon: '11.576124',
lang: 'en',
unit: 'metric',
});
return (
<ReactWeather
isLoading={isLoading}
errorMessage={errorMessage}
data={data}
lang="en"
locationLabel="Munich"
unitsLabels={{ temperature: 'C', windSpeed: 'Km/h' }}
showForecast
/>
);
};
```

Then in your code file you can import the component

#### Using ES2015 import
#### Usage with WeatherBit

```js
import ReactWeather from 'react-open-weather';
//Optional include of the default css styles
import 'react-open-weather/lib/css/ReactWeather.css';
import ReactWeather, { useWeatherBit } from 'react-open-weather';

const { data, isLoading, errorMessage } = useWeatherBit({
key: 'YOUR-API-KEY',
lat: '48.137154',
lon: '11.576124',
lang: 'en',
});
```

#### Using CommonJS

```js
var ReactWeather = require('react-open-weather').default;
//Optional include of the default css styles
require('react-open-weather/lib/css/ReactWeather.css');
#### Custom styling

```jsx
const customStyles = {
fontFamily: 'Helvetica, sans-serif',
gradientStart: '#0181C2',
gradientMid: '#04A7F9',
gradientEnd: '#4BC4F7',
locationFontColor: '#FFF',
todayTempFontColor: '#FFF',
todayDateFontColor: '#B5DEF4',
todayRangeFontColor: '#B5DEF4',
todayDescFontColor: '#B5DEF4',
todayInfoFontColor: '#B5DEF4',
todayIconColor: '#FFF',
forecastBackgroundColor: '#FFF',
forecastSeparatorColor: '#DDD',
forecastDateColor: '#777',
forecastDescColor: '#777',
forecastRangeColor: '#777',
forecastIconColor: '#4BC4F7',
};

<ReactWeather
theme={customStyles}
...
/>
```

#### UMD build is available with script tag
## Props

```html
<script src="node_modules/react-open-weather/lib/js/ReactWeather.js"></script>
```

### Usage

---
| Props | Options | Default | Description |
| ------------- | ---------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| data | - | - | the data object provided from the provider hooks or your custom data provider (check the customization section below to provide your own data) |
| isLoading | true, false | false | boolean to determine if the component shows a loader untill data is ready |
| errorMessage | - | - | error message string |
| 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 |
| locationLabel | - | - | The name of the location or city to show in the component |
| unitsLabels | - | { temperature: 'C', windSpeed: 'Km/h' } | the labels to be used for temprature and windspeed |
| showForecast | true, false | true | whether or not to show the forecast bottom part of the component |

### 1-Loading today weather data by city name

```html
<ReactWeather
forecast="today"
apikey="YOUR_API_KEY"
type="city"
city="Munich"
/>
```

---
## Customizations

### 2-Loading today data by longitude and latitude
You 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

```html
<ReactWeather
forecast="today"
apikey="YOUR_API_KEY"
type="geo"
lat="48.1351"
lon="11.5820"
/>
```

### 3-Loading today data based on the current IP address (default)

```html
<ReactWeather forecast="today" apikey="YOUR_API_KEY" type="auto" />
```

### 3-Loading 5 days forecast

```html
<ReactWeather
forecast="5days"
apikey="YOUR_API_KEY"
type="city"
city="Munich"
/>
```js
const data = {
forecast: [
{
date: 'Fri 27 November',
description: 'Clear',
icon:'SVG PATH',
temperature: { min: '-0', max: '6' },
wind: '2',
humidity: 60,
},
{
date: 'Sat 28 November',
description: 'Clouds',
icon:'SVG PATH',
temperature: { min: '-1', max: '6' },
wind: '3',
humidity: 67,
},
.....
],
current: {
date: 'Fri 27 November',
description: 'Clear',
icon:'SVG PATH',
temperature: { current: '-2', min: -3, max: 1 },
wind: '2',
humidity: 90,
},
};
```

### 4-Changing the the units to imperial system
## Translate Wind and Humidity

```html
<ReactWeather
forecast="today"
unit="imperial"
apikey="YOUR_API_KEY"
type="city"
city="Munich"
/>
```
In 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

### 5-Changing the language

```html
<ReactWeather
forecast="today"
unit="imperial"
apikey="YOUR_API_KEY"
type="city"
city="Munich"
lang="es"
/>
```
```Javascript

## Props Options
langText: {

| Props | Options | Default | Description |
| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **type** | 'city', 'geo' | city | Determine the data should be loaded by city name or longitude and latitude |
| **city** | | | Name of the city to show forecast for, must be provided if the type='city' |
| **lon** | | | Longitude value, must be provided if the type='geo' |
| **lat** | | | latitude value, must be provided if the type='geo' |
| **forecast** | 'today', '5days' | today | Determine what forecast to show, today or today plus 4 days ahead |
| **apikey** | | | Your API key for open weather map API |
| **unit** | 'imperial', 'meteric' | meteric | The unit system you want to use, for Meteric the temperature will be shown in Celsius and distances will be in kilometers, for Imperial the temperature will be shown in Fahrenheit and distances in miles. |
| **lang** | lang codes | en | Returns 'condition:text' field in API in the desired language, Please pass 'lang code' from below table. e.g.: lang=es |
en: { Wind: 'Wind', Humidity: 'Humidity',},

## Translate Wind and Humidity
es: { Wind: 'Viento', Humidity: 'Humedad',}

In 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
}

```Javascript
langText: {
en: { Wind: 'Wind', Humidity: 'Humidity',},
es: { Wind: 'Viento', Humidity: 'Humedad',}
}
```

## Language and lang codes from OpenWeather

| Language | lang code |
| ------------------- | --------- |
| Arabic | ar |
| Bengali | bn |
| Bulgarian | bg |
| Chinese Simplified | zh |
| Chinese Traditional | zh_tw |
| Czech | cs |
| Danish | da |
| Dutch | nl |
| Finnish | fi |
| French | fr |
| German | de |
| Greek | el |
| Hindi | hi |
| Hungarian | hu |
| Italian | it |
| Japanese | ja |
| Javanese | jv |
| Korean | ko |
| Mandarin | zh_cmn |
| Marathi | mr |
| Polish | pl |
| Portuguese | pt |
| Punjabi | pa |
| Romanian | ro |
| Russian | ru |
| Serbian | sr |
| Sinhalese | si |
| Slovak | sk |
| Spanish | es |
| Swedish | sv |
| Tamil | ta |
| Telugu | te |
| Turkish | tr |
| Ukrainian | uk |
| Urdu | ur |
| Vietnamese | vi |
| Wu (Shanghainese) | zh_wuu |
| Xiang | zh_hsn |
| Yue (Cantonese) | zh_yue |
| Zulu | zu |

## Contribution

If 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.

0 comments on commit 444a562

Please sign in to comment.