# snoweb

> Falling snowflakes for your website and christmas mood ❄️

Latest version **1.0.12** (published 2020-10-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install snoweb
pnpm add snoweb
yarn add snoweb
bun add snoweb
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2020-10-15 |
| First published | 2020-10-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 31.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | romazherdev@gmail.com |
| Maintainers | romazherdev |
| Keywords | snow, snowfall, snowflakes, christmas, new year, winter |

## Links

- npm: https://www.npmjs.com/package/snoweb
- Repository: https://github.com/Romalei/snoweb
- Homepage: https://github.com/Romalei/snoweb#readme
- Issues: https://github.com/Romalei/snoweb/issues
- npm.io page: https://npm.io/package/snoweb

## Recent versions

- 1.0.12 (latest) — 2020-10-15
- 1.0.11 — 2020-10-15
- 1.0.10 — 2020-10-15
- 1.0.9 — 2020-10-15
- 1.0.8 — 2020-10-15
- 1.0.7 — 2020-10-14
- 1.0.6 — 2020-10-14
- 1.0.5 — 2020-10-14
- 1.0.4 — 2020-10-14
- 1.0.3 — 2020-10-14
- 1.0.2 — 2020-10-14
- 1.0.1 — 2020-10-14
- 1.0.0 — 2020-10-14

## README

# snoweb
Falling snowflakes for your website and christmas mood ❄️

## Why snoweb?
1. Everyone loves snow
2. Zero config although you can pass some configuration
3. Easy to use

## Quick start
### Step 1: Install

`npm install snoweb --save`

or

`yarn add snoweb`

### Step 2: Import and use

```typescript
import { Snoweb } from 'snoweb';

const snoweb = new Snoweb();
snoweb.start();
```

### Step 3: Enjoy
![snowfall](https://user-images.githubusercontent.com/15265894/96039109-d3f35e00-0e70-11eb-9a99-cca027c0257d.gif)

## Tips
### Tip 1: Configure your snowfall
You can provide configuration object `Partal<SnowebConfig>` into the constructor.
See the description in the [API section](#SnowebConfig)
```typescript
const snoweb = new Snoweb({
  gravity: 20,
  snowflakesColor: 'red',
  snowflakesCount: 200,
  zIndex: 1000,
});
``` 

### Tip 2: Smooth stop + destroy
By default `snoweb.stop()` method just smoothly stops the snowfall animation. However, the DOM element still remains.
If you want to stop and fully destroy it you can do the following:
```
const snoweb = new Snoweb();
snoweb.start();
// ...
snoweb.stop(() => snoweb.destroy());
``` 

## API
### Snoweb

| Methods                                      | What it does?                                                                                                                                                    |
|----------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| constructor(config: Partial\<SnowebConfig\>) | Default constructor which is executed after you have called `new Snoweb()`.                                                                                      |
| start(): void                                | Begins the snowfall. Ho-ho-ho 🎅                                                                                                                                  |
| stop(afterStopCallback?: () =>  void): void  | Stops the snowfall. `afterStopCallback?: () => void` - a callback function which is called after the snowfall is fully stopped (all the snowflakes have fallen). |
| destroy(): void                              | Stops the snowfall immediately and destroys the DOM element                                                                                                      |
| isStarted(): boolean                         | Shows whether the snowfall is being started                                                                                                                      |

### SnowebConfig
| Property                                     | What it does?                                                             | Default value |
|----------------------------------------------|---------------------------------------------------------------------------|---------------|
| snowflakesCount: number | Exact count of the snowflakes to be rendered. Might affect performance if the value is too big.| 100           |
| gravity: number         | The higher the value the faster the snowflakes will fall                                       | 10            |
| snowflakesColor: string | CSS color of the snowflakes                                                                    | '#fff'        |
| zIndex: number          | Snowfall z-index                                                                               | 1000000       |

## Check it out on Stackblitz
https://stackblitz.com/edit/snoweb?file=index.js

---
_Source: https://npm.io/package/snoweb · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._