react-snow-overlay
Version:
A performant snowfall effect for your website using canvas and web workers
33 lines (22 loc) • 4.96 kB
Markdown
# 🌨️ react-snow-overlay
## DEMO: [LINK](https://c-o-d-e-c-o-w-b-o-y.github.io/react-snow-overlay/docs/playground)
## DOCS: [LINK](https://c-o-d-e-c-o-w-b-o-y.github.io/react-snow-overlay/docs/installation)
### Installation
```bash
npm install react-snow-overlay
```
### Usage
```jsx
import { SnowOverlay } from 'react-snow-overlay';
<SnowOverlay />;
```
### Props
| Name | Type | Description |
| ---------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `maxParticles` | `number` | The maximum number of snow particles displayed on the screen at once. Default is `50` |
| `color` | `string` | The color of the snow particles. Default is `rgba(255, 255, 255, 0.8)` |
| `speed` | `"DEFAULT" \| "FAST" \| "FASTER"` | Speed at which snow particles fall down the screen |
| `zIndex` | `number` | The `z-index` of the `canvas`. Default is `2147483647` (`2^31 - 1`, max signed 32-bit integer) |
| `disabled` | `boolean` | Disables the snow effect |
| `disabledOnSingleCpuDevices` | `boolean` | Disables the snow effect on devices with a single CPU core available to them. This prop exists because the premise of this library is to put the snow-painting logic onto a seperate thread other than the main one to keep the rest of your site running smoothly. However, some devices/browsers may only have one CPU core, making this impossible. This prop prevents snow being shown on such devices as it may cause performance issues. Default is `false` but I recommend you set it to `true` |