Natural Preference for Minification

    react-snowflakes

    1.0.0 • Public • Published

    React Snowflakes

    Frank Sinatra

    “Let it snow on your React website!” – Frank Sinatra1

    How to use?

    import {DepthOfFieldSnowfall} from 'react-snowflakes';
     
    // Insert anywhere in your code and that's it!
    <DepthOfFieldSnowfall count={50}
                          style={{
                            // Position must be relative or absolute,
                            // because snowflakes are positioned absolutely.
                            position: 'relative',
                            width: '300px',
                            height: '300px'
                          }}/>

    You can have more control over snowflakes with Snowfall:

    import {Snowfall, Snowflake} from 'react-snowflakes';
     
    <Snowfall count={50}
              style={{
                position: 'relative',
                width: '300px',
                height: '300px'
              }}
              snowflakeFactory={index => {
                const size = index / count;
                const w = 5 + 10 * size + 'px';
                return (
                  <Snowflake speed={.05 + size * 2}
                             xSpeedPrc={.3 * size}
                             ySpeedPrc={.1 * size}
                             style={{
                               width: w,
                               height: w,
                               borderRadius: '50%',
                               backgroundColor: 'white',
                               opacity: .2 + .8 * size,
                               filter: `blur(${Math.round(Math.max(size - .5, 0) * 15)}px)`
                             }}/>
                )
              }}/>

    License

    The code is available under MIT licence.

    Install

    npm i react-snowflakes

    DownloadsWeekly Downloads

    70

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • smikhalevski