{"id":21506692,"url":"https://github.com/divyanshu013/react-animated-weather","last_synced_at":"2025-07-16T01:33:40.953Z","repository":{"id":19972036,"uuid":"88411038","full_name":"divyanshu013/react-animated-weather","owner":"divyanshu013","description":"Animated weather component for React inspired by Skycons http://darkskyapp.github.io/skycons/ :sunny:","archived":false,"fork":false,"pushed_at":"2022-12-10T17:04:20.000Z","size":3270,"stargazers_count":50,"open_issues_count":16,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T20:08:20.186Z","etag":null,"topics":["animated-icons","react-component","skycons","weather-icons"],"latest_commit_sha":null,"homepage":"https://divyanshu013.github.io/react-animated-weather/","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/divyanshu013.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}},"created_at":"2017-04-16T12:14:19.000Z","updated_at":"2024-03-03T12:58:03.000Z","dependencies_parsed_at":"2023-01-11T20:40:27.785Z","dependency_job_id":null,"html_url":"https://github.com/divyanshu013/react-animated-weather","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divyanshu013%2Freact-animated-weather","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divyanshu013%2Freact-animated-weather/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divyanshu013%2Freact-animated-weather/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divyanshu013%2Freact-animated-weather/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/divyanshu013","download_url":"https://codeload.github.com/divyanshu013/react-animated-weather/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226090712,"owners_count":17572117,"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":["animated-icons","react-component","skycons","weather-icons"],"created_at":"2024-11-23T19:45:20.845Z","updated_at":"2024-11-23T19:45:21.588Z","avatar_url":"https://github.com/divyanshu013.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Animated Weather\n\nAnimated weather component for React inspired by Skycons http://darkskyapp.github.io/skycons/ :sunny:\n\n[![Build Status](https://travis-ci.org/divyanshu013/react-animated-weather.svg?branch=master)](https://travis-ci.org/divyanshu013/react-animated-weather)\n[![npm](https://img.shields.io/npm/v/react-animated-weather.svg)](https://www.npmjs.com/package/react-animated-weather)\n[![npm](https://img.shields.io/npm/dt/react-animated-weather.svg)](https://www.npmjs.com/package/react-animated-weather)\n\n![React Animated Weather](./react-animated-weather.gif \"React Animated Weather\")\n\n## Installation\n\n**React Animated Weather** is available as a node package. Get it via `yarn` or `npm`:\n\n```bash\nyarn add react-animated-weather\n```\n\n-or-\n\n```bash\nnpm install react-animated-weather\n```\n\nIf using `npm` \u003c 5, you might want to save to your `package.json`:\n\n```bash\nnpm install --save react-animated-weather\n```\n\n`react-animated-weather` also has peer dependencies on `react`, `react-dom` and `prop-types`.\n\n## Usage\n\nImport the ReactAnimatedWeather component:\n\n```javascript\nimport ReactAnimatedWeather from 'react-animated-weather';\n```\n\nSample usage:\n\n```javascript\nimport React from 'react';\nimport ReactAnimatedWeather from 'react-animated-weather';\n\nconst defaults = {\n  icon: 'CLEAR_DAY',\n  color: 'goldenrod',\n  size: 512,\n  animate: true\n};\n\nconst App = () =\u003e (\n  \u003cReactAnimatedWeather\n    icon={defaults.icon}\n    color={defaults.color}\n    size={defaults.size}\n    animate={defaults.animate}\n  /\u003e\n);\n\nexport default App;\n```\n\nProps:\n\n- **icon:** Takes a string to display the corresponding icon out of the following\n  - CLEAR_DAY\n  - CLEAR_NIGHT\n  - PARTLY_CLOUDY_DAY\n  - PARTLY_CLOUDY_NIGHT\n  - CLOUDY\n  - RAIN\n  - SLEET\n  - SNOW\n  - WIND\n  - FOG\n\n- **color:** Pass a color value or hex code to color the weather component, if not passed, by default *black* is picked\n\n- **size:** Pass a number to size the weather component in pixels, if not passed, by default *64* is set as the size\n\n- **animate:** Pass a boolean value, if *true* (by default), the weather component will animate and if *false*, the weather component will remain static without any animation\n\nHere are the default props used by ReactAnimatedWeather component:\n\n```javascript\nReactAnimatedWeather.defaultProps = {\n  animate: true,\n  size: 64,\n  color: 'black'\n};\n\nReactAnimatedWeather.propTypes = {\n  icon: PropTypes.oneOf([\n    'CLEAR_DAY',\n    'CLEAR_NIGHT',\n    'PARTLY_CLOUDY_DAY',\n    'PARTLY_CLOUDY_NIGHT',\n    'CLOUDY',\n    'RAIN',\n    'SLEET',\n    'SNOW',\n    'WIND',\n    'FOG'\n  ]).isRequired,\n  animate: PropTypes.bool,\n  size: PropTypes.number,\n  color: PropTypes.string\n};\n```\n\n## Development\n\nI've added a `storybook` for the component since it has a small number of props and the `storybook` interface is quite good for testing out\nthe component. You can fire up the `storybook` by running:\n\n```bash\nyarn storybook\n```\n\n-or-\n\n```bash\nnpm run storybook\n```\n\n## Motivation\n\nI got inspired to write this component from [darkskyapp's](https://github.com/darkskyapp) [Skycons](http://darkskyapp.github.io/skycons/). It makes use of the `\u003ccanvas\u003e` element to render beautiful animated weather components.\n\nWorking with `\u003ccanvas\u003e` in virtual DOM is a bit tricky. ReactAnimatedWeather uses a [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) to refer to the DOM holding the `\u003ccanvas\u003e` element and render the weather component on `componentDidMount()`.\n\nIf you've found any bugs, please open an issue on [github](https://github.com/divyanshu013/react-animated-weather/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivyanshu013%2Freact-animated-weather","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivyanshu013%2Freact-animated-weather","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivyanshu013%2Freact-animated-weather/lists"}