UNPKG

react-snowfall

Version:

A react component that creates a snowfall effect

86 lines (85 loc) 2.83 kB
export interface SnowflakeProps { /** The color of the snowflake, can be any valid CSS color. */ color: string; /** * The minimum and maximum radius of the snowflake, will be * randomly selected within this range. * * The default value is `[0.5, 3.0]`. */ radius: [number, number]; /** * The minimum and maximum speed of the snowflake. * * The speed determines how quickly the snowflake moves * along the y axis (vertical speed). * * The values will be randomly selected within this range. * * The default value is `[1.0, 3.0]`. */ speed: [number, number]; /** * The minimum and maximum wind of the snowflake. * * The wind determines how quickly the snowflake moves * along the x axis (horizontal speed). * * The values will be randomly selected within this range. * * The default value is `[-0.5, 2.0]`. */ wind: [number, number]; /** * The frequency in frames that the wind and speed values * will update. * * The default value is 200. */ changeFrequency: number; /** * An array of images that will be rendered as the snowflakes instead * of the default circle shapes. */ images?: CanvasImageSource[]; /** * The minimum and maximum rotation speed of the snowflake (in degrees of * rotation per frame). * * The rotation speed determines how quickly the snowflake rotates when * an image is being rendered. * * The values will be randomly selected within this range. * * The default value is `[-1.0, 1.0]`. */ rotationSpeed: [number, number]; } export type SnowflakeConfig = Partial<SnowflakeProps>; export declare const defaultConfig: SnowflakeProps; /** * An individual snowflake that will update it's location every call to `update` * and draw itself to the canvas every call to `draw`. */ declare class Snowflake { private static offscreenCanvases; /** * A utility function to create a collection of snowflakes * @param canvas The canvas element * @param amount The number of snowflakes * @param config The configuration for each snowflake */ static createSnowflakes(canvas: HTMLCanvasElement | null, amount: number, config: SnowflakeConfig): Snowflake[]; private config; private params; private framesSinceLastUpdate; private image?; constructor(canvas: HTMLCanvasElement, config?: SnowflakeConfig); private selectImage; updateConfig(config: SnowflakeConfig): void; private updateTargetParams; update(offsetWidth: number, offsetHeight: number, framesPassed?: number): void; private getImageOffscreenCanvas; draw(ctx: CanvasRenderingContext2D): void; } export default Snowflake;