Nesting Penguins Molt

    react-snowfall
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    Snowfall Demo

    React Snowfall

    npm GitHub stars Conventional Commits

    A react component that creates a snowfall effect

    Installation

    With npm

    npm i react-snowfall
    

    Or with yarn

    yarn add react-snowfall
    

    Usage

    Basic usage requires no properties - it will grow to fill the nearest relative positioned parent element.

    import React from 'react'
    import ReactDOM from 'react-dom'
    import Snowfall from 'react-snowfall'
    
    ReactDOM.render(
      <div style={{ height: 400, width: 400, background: '#282c34', position: 'relative' }}>
        <Snowfall />
      </div>,
      document.querySelector('#app'),
    )

    Configuration

    An optional color, style, and snowflakeCount property can be passed in to the component.

    <Snowfall
      // Changes the snowflake color
      color="red"
      // Applied to the canvas element
      style={{ background: '#fff' }}
      // Controls the number of snowflakes that are created (default 150)
      snowflakeCount={200}
    />

    Positioning

    The snowfall container is absolute positioned and has the following default styles (see the definition):

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    If you want the component to cover the entire screen then you can change the position to fixed and using vw/vh units by passing in an overriding styles object:

    <Snowfall
      style={{
        position: 'fixed',
        width: '100vw',
        height: '100vh'
      }}
    />

    Install

    npm i react-snowfall

    DownloadsWeekly Downloads

    5,870

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    78.3 kB

    Total Files

    32

    Last publish

    Collaborators

    • cahilfoley