Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jungledre/react-snow-effect

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/jungledre/react-snow-effect
Owner: jungledre
Created: 2015-12-18T05:52:07.000Z (almost 9 years ago)
Default Branch: master
Last Pushed: 2016-12-24T23:48:27.000Z (almost 8 years ago)
Last Synced: 2024-09-24T18:18:15.100Z (3 months ago)
Language: JavaScript
Size: 714 KB
Stars: 4
Watchers: 2
Forks: 6
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

fucking-awesome-web-effect - react-snow-effect - react-snow-effect. (🚀 A series of exquisite and compact web page cool effects / Rain & Snow)
awesome-web-effect - react-snow-effect - react-snow-effect. (🚀 A series of exquisite and compact web page cool effects / Rain & Snow)

README

        #React Snow Effect · [![Build Status](https://travis-ci.org/jungledre/react-snow-effect.svg?branch=master)](https://travis-ci.org/jungledre/react-snow-effect) [![npm version](https://img.shields.io/npm/v/react-snow-effect.svg?style=flat)](https://www.npmjs.com/package/react-snow-effect) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)

![alt text](http://i.imgur.com/S1cpIi5.gif)

###How do I use this?

```

npm install react-snow-effect

```

Include the component in your main app component outside of any containers.

```js

// MyApp.js

var React = require('react');

var Snow = require('react-snow-effect');

var MyApp = React.createClass({

	render: function() {

		return (

			


				

				

					{appContents}

				

			

		)

	}

}

module.exports = MyApp;

```

Disclaimer! This code borrows heavily from a lovely [html5-canvas-snow-effect] (http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect) tutorial

If you have any problems, please let me know. This is my first npm package and I'd love for it to work for everyone!

:snowflake: :snowflake: Happy Holidays! :snowman: :snowflake: :snowflake:

                         *  .  *

                       . _\/ \/_ .

                        \  \ /  /             .      .   

          ..    ..    -==>: X :<==-           _\/  \/_

          '\    /'      / _/ \_ \              _\/\/_

            \\//       '  /\ /\  '         _\_\_\/\/_/_/_

       _.__\\\///__._    *  '  *            / /_/\/\_\ \

        '  ///\\\  '                           _/\/\_

            //\\                               /\  /\

          ./    \.             ._    _.       '      '

          ''    ''             (_)  (_)                  <> \  / <>

                                .\::/.                   \_\/  \/_/

               .:.          _.=._\\//_.=._                  \\//

          ..   \o/   ..      '=' //\\ '='             _<>_\_\<>/_/_<>_

          :o|   |   |o:         '/::\'                 <> / /<>\ \ <>

           ~ '. ' .' ~         (_)  (_)      _    _       _ //\\ _

               >O<             '      '     /_/  \_\     / /\  /\ \

           _ .' . '. _                        \\//       <> /  \ <>

          :o|   |   |o:                   /\_\\>/_/\

          ''   /o\   ''     '.|  |.'      \/ //><\\ \/

               ':'        . ~~\  /~~ .       _//\\_

                          _\_._\/_._/_      \_\  /_/

                           / ' /\ ' \                   \o/

           o              ' __/  \__ '              _o/.:|:.\o_

      o    :    o         ' .'|  |'.                  .\:|:/.

        '.\'/.'                 .                 -=>>::>o<::<<=-

        :->@<-:                 :                   _ '/:|:\' _

        .'/.\'.           '.___/*\___.'              o\':|:'/o

      o    :    o           \* \ / */                   /o\

           o                 >--X--<

                            /*_/ \_*\

                          .'   \*/   '.

                                :

                                '