New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-snowfall
Advanced tools
react-snowfall - npm Package Compare versions
Comparing version 1.1.1 to 1.1.2
@@ -5,2 +5,9 @@ # Changelog | ||
| ### [1.1.2](https://github.com/cahilfoley/react-snowfall/compare/v1.1.1...v1.1.2) (2022-01-20) | ||
| ### Bug Fixes | ||
| * **Types:** Remove labeled tuple elements ([30dbfa7](https://github.com/cahilfoley/react-snowfall/commit/30dbfa728df23d60775eb8645af5a93ff9b992e2)), closes [#33](https://github.com/cahilfoley/react-snowfall/issues/33) | ||
| ### [1.1.1](https://github.com/cahilfoley/react-snowfall/compare/v1.1.0...v1.1.1) (2021-11-29) | ||
@@ -7,0 +14,0 @@ |
@@ -1,3 +0,3 @@ | ||
| import { CSSProperties } from 'react'; | ||
| export declare const snowfallBaseStyle: CSSProperties; | ||
| /// <reference types="react" /> | ||
| export declare const snowfallBaseStyle: React.CSSProperties; | ||
| export declare const targetFrameTime: number; |
@@ -1,2 +0,2 @@ | ||
| import { DependencyList, EffectCallback, MutableRefObject, CSSProperties } from 'react'; | ||
| /// <reference types="react" /> | ||
| import Snowflake, { SnowflakeConfig } from './Snowflake'; | ||
@@ -9,3 +9,3 @@ /** | ||
| */ | ||
| export declare const useSnowflakes: (canvasRef: React.MutableRefObject<HTMLCanvasElement | undefined>, amount: number, config: SnowflakeConfig) => Snowflake[]; | ||
| export declare const useSnowflakes: (canvasRef: React.RefObject<HTMLCanvasElement>, amount: number, config: SnowflakeConfig) => Snowflake[]; | ||
| /** | ||
@@ -16,3 +16,3 @@ * Returns the height and width of a HTML element, uses the `ResizeObserver` api if available to detect changes to the | ||
| */ | ||
| export declare const useComponentSize: (ref: MutableRefObject<HTMLElement | undefined>) => { | ||
| export declare const useComponentSize: (ref: React.RefObject<HTMLElement>) => { | ||
| height: number; | ||
@@ -25,750 +25,3 @@ width: number; | ||
| */ | ||
| export declare const useSnowfallStyle: (overrides?: CSSProperties | undefined) => { | ||
| alignContent?: string | undefined; | ||
| alignItems?: string | undefined; | ||
| alignSelf?: string | undefined; | ||
| animationDelay?: string | undefined; | ||
| animationDirection?: string | undefined; | ||
| animationDuration?: string | undefined; | ||
| animationFillMode?: string | undefined; | ||
| animationIterationCount?: string | number | undefined; | ||
| animationName?: string | undefined; | ||
| animationPlayState?: string | undefined; | ||
| animationTimingFunction?: string | undefined; | ||
| appearance?: "none" | "inherit" | "button" | "meter" | "textarea" | "-moz-initial" | "initial" | "revert" | "unset" | "button-bevel" | "checkbox" | "listbox" | "menulist" | "menulist-button" | "progress-bar" | "push-button" | "radio" | "searchfield" | "slider-horizontal" | "square-button" | "textfield" | undefined; | ||
| backdropFilter?: string | undefined; | ||
| backfaceVisibility?: "inherit" | "hidden" | "visible" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| backgroundAttachment?: string | undefined; | ||
| backgroundBlendMode?: string | undefined; | ||
| backgroundClip?: string | undefined; | ||
| backgroundColor?: string | undefined; | ||
| backgroundImage?: string | undefined; | ||
| backgroundOrigin?: string | undefined; | ||
| backgroundPosition?: string | number | undefined; | ||
| backgroundPositionX?: string | number | undefined; | ||
| backgroundPositionY?: string | number | undefined; | ||
| backgroundRepeat?: string | undefined; | ||
| backgroundSize?: string | number | undefined; | ||
| blockOverflow?: string | undefined; | ||
| blockSize?: string | number | undefined; | ||
| borderBlockColor?: string | undefined; | ||
| borderBlockEndColor?: string | undefined; | ||
| borderBlockEndStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| borderBlockEndWidth?: string | number | undefined; | ||
| borderBlockStartColor?: string | undefined; | ||
| borderBlockStartStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| borderBlockStartWidth?: string | number | undefined; | ||
| borderBlockStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| borderBlockWidth?: string | number | undefined; | ||
| borderBottomColor?: string | undefined; | ||
| borderBottomLeftRadius?: string | number | undefined; | ||
| borderBottomRightRadius?: string | number | undefined; | ||
| borderBottomStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| borderBottomWidth?: string | number | undefined; | ||
| borderCollapse?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "collapse" | "separate" | undefined; | ||
| borderEndEndRadius?: string | number | undefined; | ||
| borderEndStartRadius?: string | number | undefined; | ||
| borderImageOutset?: string | number | undefined; | ||
| borderImageRepeat?: string | undefined; | ||
| borderImageSlice?: string | number | undefined; | ||
| borderImageSource?: string | undefined; | ||
| borderImageWidth?: string | number | undefined; | ||
| borderInlineColor?: string | undefined; | ||
| borderInlineEndColor?: string | undefined; | ||
| borderInlineEndStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| borderInlineEndWidth?: string | number | undefined; | ||
| borderInlineStartColor?: string | undefined; | ||
| borderInlineStartStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| borderInlineStartWidth?: string | number | undefined; | ||
| borderInlineStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| borderInlineWidth?: string | number | undefined; | ||
| borderLeftColor?: string | undefined; | ||
| borderLeftStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| borderLeftWidth?: string | number | undefined; | ||
| borderRightColor?: string | undefined; | ||
| borderRightStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| borderRightWidth?: string | number | undefined; | ||
| borderSpacing?: string | number | undefined; | ||
| borderStartEndRadius?: string | number | undefined; | ||
| borderStartStartRadius?: string | number | undefined; | ||
| borderTopColor?: string | undefined; | ||
| borderTopLeftRadius?: string | number | undefined; | ||
| borderTopRightRadius?: string | number | undefined; | ||
| borderTopStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| borderTopWidth?: string | number | undefined; | ||
| bottom?: string | number | undefined; | ||
| boxDecorationBreak?: "slice" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "clone" | undefined; | ||
| boxShadow?: string | undefined; | ||
| boxSizing?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "border-box" | "content-box" | undefined; | ||
| breakAfter?: "all" | "auto" | "left" | "right" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "always" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "page" | "recto" | "region" | "verso" | undefined; | ||
| breakBefore?: "all" | "auto" | "left" | "right" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "always" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "page" | "recto" | "region" | "verso" | undefined; | ||
| breakInside?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | undefined; | ||
| captionSide?: "inherit" | "bottom" | "top" | "-moz-initial" | "initial" | "revert" | "unset" | "block-end" | "block-start" | "inline-end" | "inline-start" | undefined; | ||
| caretColor?: string | undefined; | ||
| clear?: "left" | "right" | "both" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "inline-end" | "inline-start" | undefined; | ||
| clipPath?: string | undefined; | ||
| color?: string | undefined; | ||
| colorAdjust?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "economy" | "exact" | undefined; | ||
| columnCount?: number | "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| columnFill?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "balance" | "balance-all" | undefined; | ||
| columnGap?: string | number | undefined; | ||
| columnRuleColor?: string | undefined; | ||
| columnRuleStyle?: string | undefined; | ||
| columnRuleWidth?: string | number | undefined; | ||
| columnSpan?: "all" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| columnWidth?: string | number | undefined; | ||
| contain?: string | undefined; | ||
| content?: string | undefined; | ||
| counterIncrement?: string | undefined; | ||
| counterReset?: string | undefined; | ||
| cursor?: string | undefined; | ||
| direction?: "ltr" | "rtl" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| display?: string | undefined; | ||
| emptyCells?: "hide" | "show" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| filter?: string | undefined; | ||
| flexBasis?: string | number | undefined; | ||
| flexDirection?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined; | ||
| flexGrow?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| flexShrink?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| flexWrap?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | undefined; | ||
| float?: "left" | "right" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "inline-end" | "inline-start" | undefined; | ||
| fontFamily?: string | undefined; | ||
| fontFeatureSettings?: string | undefined; | ||
| fontKerning?: "auto" | "normal" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| fontLanguageOverride?: string | undefined; | ||
| fontOpticalSizing?: "auto" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| fontSize?: string | number | undefined; | ||
| fontSizeAdjust?: number | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| fontStretch?: string | undefined; | ||
| fontStyle?: string | undefined; | ||
| fontSynthesis?: string | undefined; | ||
| fontVariant?: string | undefined; | ||
| fontVariantCaps?: "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "all-petite-caps" | "all-small-caps" | "petite-caps" | "small-caps" | "titling-caps" | "unicase" | undefined; | ||
| fontVariantEastAsian?: string | undefined; | ||
| fontVariantLigatures?: string | undefined; | ||
| fontVariantNumeric?: string | undefined; | ||
| fontVariantPosition?: "sub" | "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "super" | undefined; | ||
| fontVariationSettings?: string | undefined; | ||
| fontWeight?: number | "bold" | "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "bolder" | "lighter" | undefined; | ||
| gridAutoColumns?: string | number | undefined; | ||
| gridAutoFlow?: string | undefined; | ||
| gridAutoRows?: string | number | undefined; | ||
| gridColumnEnd?: string | number | undefined; | ||
| gridColumnStart?: string | number | undefined; | ||
| gridRowEnd?: string | number | undefined; | ||
| gridRowStart?: string | number | undefined; | ||
| gridTemplateAreas?: string | undefined; | ||
| gridTemplateColumns?: string | number | undefined; | ||
| gridTemplateRows?: string | number | undefined; | ||
| hangingPunctuation?: string | undefined; | ||
| height?: string | number | undefined; | ||
| hyphens?: "auto" | "none" | "manual" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| imageOrientation?: string | undefined; | ||
| imageRendering?: "auto" | "pixelated" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "-moz-crisp-edges" | "-o-crisp-edges" | "-webkit-optimize-contrast" | "crisp-edges" | undefined; | ||
| imageResolution?: string | undefined; | ||
| initialLetter?: string | number | undefined; | ||
| inlineSize?: string | number | undefined; | ||
| inset?: string | number | undefined; | ||
| insetBlock?: string | number | undefined; | ||
| insetBlockEnd?: string | number | undefined; | ||
| insetBlockStart?: string | number | undefined; | ||
| insetInline?: string | number | undefined; | ||
| insetInlineEnd?: string | number | undefined; | ||
| insetInlineStart?: string | number | undefined; | ||
| isolation?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "isolate" | undefined; | ||
| justifyContent?: string | undefined; | ||
| justifyItems?: string | undefined; | ||
| justifySelf?: string | undefined; | ||
| left?: string | number | undefined; | ||
| letterSpacing?: string | number | undefined; | ||
| lineBreak?: "auto" | "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "strict" | "loose" | undefined; | ||
| lineHeight?: string | number | undefined; | ||
| lineHeightStep?: string | number | undefined; | ||
| listStyleImage?: string | undefined; | ||
| listStylePosition?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "inside" | "outside" | undefined; | ||
| listStyleType?: string | undefined; | ||
| marginBlock?: string | number | undefined; | ||
| marginBlockEnd?: string | number | undefined; | ||
| marginBlockStart?: string | number | undefined; | ||
| marginBottom?: string | number | undefined; | ||
| marginInline?: string | number | undefined; | ||
| marginInlineEnd?: string | number | undefined; | ||
| marginInlineStart?: string | number | undefined; | ||
| marginLeft?: string | number | undefined; | ||
| marginRight?: string | number | undefined; | ||
| marginTop?: string | number | undefined; | ||
| maskBorderMode?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "alpha" | "luminance" | undefined; | ||
| maskBorderOutset?: string | number | undefined; | ||
| maskBorderRepeat?: string | undefined; | ||
| maskBorderSlice?: string | number | undefined; | ||
| maskBorderSource?: string | undefined; | ||
| maskBorderWidth?: string | number | undefined; | ||
| maskClip?: string | undefined; | ||
| maskComposite?: string | undefined; | ||
| maskImage?: string | undefined; | ||
| maskMode?: string | undefined; | ||
| maskOrigin?: string | undefined; | ||
| maskPosition?: string | number | undefined; | ||
| maskRepeat?: string | undefined; | ||
| maskSize?: string | number | undefined; | ||
| maskType?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "alpha" | "luminance" | undefined; | ||
| maxBlockSize?: string | number | undefined; | ||
| maxHeight?: string | number | undefined; | ||
| maxInlineSize?: string | number | undefined; | ||
| maxLines?: number | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| maxWidth?: string | number | undefined; | ||
| minBlockSize?: string | number | undefined; | ||
| minHeight?: string | number | undefined; | ||
| minInlineSize?: string | number | undefined; | ||
| minWidth?: string | number | undefined; | ||
| mixBlendMode?: "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "color" | "color-burn" | "color-dodge" | "darken" | "difference" | "exclusion" | "hard-light" | "hue" | "lighten" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "soft-light" | undefined; | ||
| motionDistance?: string | number | undefined; | ||
| motionPath?: string | undefined; | ||
| motionRotation?: string | undefined; | ||
| objectFit?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "contain" | "cover" | "fill" | "scale-down" | undefined; | ||
| objectPosition?: string | number | undefined; | ||
| offsetAnchor?: string | number | undefined; | ||
| offsetDistance?: string | number | undefined; | ||
| offsetPath?: string | undefined; | ||
| offsetPosition?: string | number | undefined; | ||
| offsetRotate?: string | undefined; | ||
| offsetRotation?: string | undefined; | ||
| opacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| order?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| orphans?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| outlineColor?: string | undefined; | ||
| outlineOffset?: string | number | undefined; | ||
| outlineStyle?: string | undefined; | ||
| outlineWidth?: string | number | undefined; | ||
| overflow?: string | undefined; | ||
| overflowAnchor?: "auto" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| overflowClipBox?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "content-box" | "padding-box" | undefined; | ||
| overflowWrap?: "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "anywhere" | "break-word" | undefined; | ||
| overflowX?: "auto" | "inherit" | "hidden" | "visible" | "scroll" | "-moz-initial" | "initial" | "revert" | "unset" | "clip" | undefined; | ||
| overflowY?: "auto" | "inherit" | "hidden" | "visible" | "scroll" | "-moz-initial" | "initial" | "revert" | "unset" | "clip" | undefined; | ||
| overscrollBehavior?: string | undefined; | ||
| overscrollBehaviorX?: "auto" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "contain" | undefined; | ||
| overscrollBehaviorY?: "auto" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "contain" | undefined; | ||
| paddingBlock?: string | number | undefined; | ||
| paddingBlockEnd?: string | number | undefined; | ||
| paddingBlockStart?: string | number | undefined; | ||
| paddingBottom?: string | number | undefined; | ||
| paddingInline?: string | number | undefined; | ||
| paddingInlineEnd?: string | number | undefined; | ||
| paddingInlineStart?: string | number | undefined; | ||
| paddingLeft?: string | number | undefined; | ||
| paddingRight?: string | number | undefined; | ||
| paddingTop?: string | number | undefined; | ||
| pageBreakAfter?: "auto" | "left" | "right" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "always" | "avoid" | "recto" | "verso" | undefined; | ||
| pageBreakBefore?: "auto" | "left" | "right" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "always" | "avoid" | "recto" | "verso" | undefined; | ||
| pageBreakInside?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "avoid" | undefined; | ||
| paintOrder?: string | undefined; | ||
| perspective?: string | number | undefined; | ||
| perspectiveOrigin?: string | number | undefined; | ||
| placeContent?: string | undefined; | ||
| pointerEvents?: "all" | "auto" | "none" | "inherit" | "visible" | "-moz-initial" | "initial" | "revert" | "unset" | "fill" | "stroke" | "painted" | "visibleFill" | "visiblePainted" | "visibleStroke" | undefined; | ||
| position?: "fixed" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "-webkit-sticky" | "absolute" | "relative" | "static" | "sticky" | undefined; | ||
| quotes?: string | undefined; | ||
| resize?: "both" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "block" | "inline" | "horizontal" | "vertical" | undefined; | ||
| right?: string | number | undefined; | ||
| rotate?: string | undefined; | ||
| rowGap?: string | number | undefined; | ||
| rubyAlign?: "center" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "space-around" | "space-between" | undefined; | ||
| rubyMerge?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "collapse" | "separate" | undefined; | ||
| rubyPosition?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "inter-character" | "over" | "under" | undefined; | ||
| scale?: string | number | undefined; | ||
| scrollBehavior?: "auto" | "smooth" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| scrollMargin?: string | number | undefined; | ||
| scrollMarginBlock?: string | number | undefined; | ||
| scrollMarginBlockEnd?: string | number | undefined; | ||
| scrollMarginBlockStart?: string | number | undefined; | ||
| scrollMarginBottom?: string | number | undefined; | ||
| scrollMarginInline?: string | number | undefined; | ||
| scrollMarginInlineEnd?: string | number | undefined; | ||
| scrollMarginInlineStart?: string | number | undefined; | ||
| scrollMarginLeft?: string | number | undefined; | ||
| scrollMarginRight?: string | number | undefined; | ||
| scrollMarginTop?: string | number | undefined; | ||
| scrollPadding?: string | number | undefined; | ||
| scrollPaddingBlock?: string | number | undefined; | ||
| scrollPaddingBlockEnd?: string | number | undefined; | ||
| scrollPaddingBlockStart?: string | number | undefined; | ||
| scrollPaddingBottom?: string | number | undefined; | ||
| scrollPaddingInline?: string | number | undefined; | ||
| scrollPaddingInlineEnd?: string | number | undefined; | ||
| scrollPaddingInlineStart?: string | number | undefined; | ||
| scrollPaddingLeft?: string | number | undefined; | ||
| scrollPaddingRight?: string | number | undefined; | ||
| scrollPaddingTop?: string | number | undefined; | ||
| scrollSnapAlign?: string | undefined; | ||
| scrollSnapStop?: "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "always" | undefined; | ||
| scrollSnapType?: string | undefined; | ||
| scrollbarColor?: string | undefined; | ||
| scrollbarWidth?: "auto" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "thin" | undefined; | ||
| shapeImageThreshold?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| shapeMargin?: string | number | undefined; | ||
| shapeOutside?: string | undefined; | ||
| tabSize?: string | number | undefined; | ||
| tableLayout?: "fixed" | "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| textAlign?: "left" | "right" | "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | "match-parent" | undefined; | ||
| textAlignLast?: "auto" | "left" | "right" | "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined; | ||
| textCombineUpright?: string | undefined; | ||
| textDecorationColor?: string | undefined; | ||
| textDecorationLine?: string | undefined; | ||
| textDecorationSkip?: string | undefined; | ||
| textDecorationSkipInk?: "auto" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| textDecorationStyle?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "solid" | "wavy" | undefined; | ||
| textEmphasisColor?: string | undefined; | ||
| textEmphasisPosition?: string | undefined; | ||
| textEmphasisStyle?: string | undefined; | ||
| textIndent?: string | number | undefined; | ||
| textJustify?: "auto" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "inter-character" | "inter-word" | undefined; | ||
| textOrientation?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "mixed" | "sideways" | "upright" | undefined; | ||
| textOverflow?: string | undefined; | ||
| textRendering?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "geometricPrecision" | "optimizeLegibility" | "optimizeSpeed" | undefined; | ||
| textShadow?: string | undefined; | ||
| textSizeAdjust?: string | undefined; | ||
| textTransform?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase" | undefined; | ||
| textUnderlinePosition?: string | undefined; | ||
| top?: string | number | undefined; | ||
| touchAction?: string | undefined; | ||
| transform?: string | undefined; | ||
| transformBox?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "border-box" | "fill-box" | "view-box" | undefined; | ||
| transformOrigin?: string | number | undefined; | ||
| transformStyle?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "flat" | "preserve-3d" | undefined; | ||
| transitionDelay?: string | undefined; | ||
| transitionDuration?: string | undefined; | ||
| transitionProperty?: string | undefined; | ||
| transitionTimingFunction?: string | undefined; | ||
| translate?: string | number | undefined; | ||
| unicodeBidi?: "normal" | "inherit" | "embed" | "-moz-initial" | "initial" | "revert" | "unset" | "isolate" | "-moz-isolate" | "-moz-isolate-override" | "-moz-plaintext" | "-webkit-isolate" | "bidi-override" | "isolate-override" | "plaintext" | undefined; | ||
| userSelect?: "all" | "auto" | "none" | "inherit" | "text" | "-moz-initial" | "initial" | "revert" | "unset" | "contain" | "-moz-none" | "element" | undefined; | ||
| verticalAlign?: string | number | undefined; | ||
| visibility?: "inherit" | "hidden" | "visible" | "-moz-initial" | "initial" | "revert" | "unset" | "collapse" | undefined; | ||
| whiteSpace?: "normal" | "inherit" | "pre" | "-moz-initial" | "initial" | "revert" | "unset" | "nowrap" | "-moz-pre-wrap" | "pre-line" | "pre-wrap" | undefined; | ||
| widows?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| width?: string | number | undefined; | ||
| willChange?: string | undefined; | ||
| wordBreak?: "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "break-word" | "break-all" | "keep-all" | undefined; | ||
| wordSpacing?: string | number | undefined; | ||
| wordWrap?: "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "break-word" | undefined; | ||
| writingMode?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl" | undefined; | ||
| zIndex?: number | "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| zoom?: string | number | undefined; | ||
| all?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| animation?: string | number | undefined; | ||
| background?: string | number | undefined; | ||
| border?: string | number | undefined; | ||
| borderBlock?: string | number | undefined; | ||
| borderBlockEnd?: string | number | undefined; | ||
| borderBlockStart?: string | number | undefined; | ||
| borderBottom?: string | number | undefined; | ||
| borderColor?: string | undefined; | ||
| borderImage?: string | number | undefined; | ||
| borderInline?: string | number | undefined; | ||
| borderInlineEnd?: string | number | undefined; | ||
| borderInlineStart?: string | number | undefined; | ||
| borderLeft?: string | number | undefined; | ||
| borderRadius?: string | number | undefined; | ||
| borderRight?: string | number | undefined; | ||
| borderStyle?: string | undefined; | ||
| borderTop?: string | number | undefined; | ||
| borderWidth?: string | number | undefined; | ||
| columnRule?: string | number | undefined; | ||
| columns?: string | number | undefined; | ||
| flex?: string | number | undefined; | ||
| flexFlow?: string | undefined; | ||
| font?: string | undefined; | ||
| gap?: string | number | undefined; | ||
| grid?: string | undefined; | ||
| gridArea?: string | number | undefined; | ||
| gridColumn?: string | number | undefined; | ||
| gridRow?: string | number | undefined; | ||
| gridTemplate?: string | undefined; | ||
| lineClamp?: number | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| listStyle?: string | undefined; | ||
| margin?: string | number | undefined; | ||
| mask?: string | number | undefined; | ||
| maskBorder?: string | number | undefined; | ||
| motion?: string | number | undefined; | ||
| offset?: string | number | undefined; | ||
| outline?: string | number | undefined; | ||
| padding?: string | number | undefined; | ||
| placeItems?: string | undefined; | ||
| placeSelf?: string | undefined; | ||
| textDecoration?: string | undefined; | ||
| textEmphasis?: string | undefined; | ||
| transition?: string | undefined; | ||
| MozAnimationDelay?: string | undefined; | ||
| MozAnimationDirection?: string | undefined; | ||
| MozAnimationDuration?: string | undefined; | ||
| MozAnimationFillMode?: string | undefined; | ||
| MozAnimationIterationCount?: string | number | undefined; | ||
| MozAnimationName?: string | undefined; | ||
| MozAnimationPlayState?: string | undefined; | ||
| MozAnimationTimingFunction?: string | undefined; | ||
| MozAppearance?: "none" | "inherit" | "button" | "-moz-initial" | "initial" | "revert" | "unset" | "button-bevel" | "checkbox" | "listbox" | "menulist" | "menulist-button" | "radio" | "searchfield" | "textfield" | "-moz-mac-unified-toolbar" | "-moz-win-borderless-glass" | "-moz-win-browsertabbar-toolbox" | "-moz-win-communications-toolbox" | "-moz-win-communicationstext" | "-moz-win-exclude-glass" | "-moz-win-glass" | "-moz-win-media-toolbox" | "-moz-win-mediatext" | "-moz-window-button-box" | "-moz-window-button-box-maximized" | "-moz-window-button-close" | "-moz-window-button-maximize" | "-moz-window-button-minimize" | "-moz-window-button-restore" | "-moz-window-frame-bottom" | "-moz-window-frame-left" | "-moz-window-frame-right" | "-moz-window-titlebar" | "-moz-window-titlebar-maximized" | "button-arrow-down" | "button-arrow-next" | "button-arrow-previous" | "button-arrow-up" | "button-focus" | "caret" | "checkbox-container" | "checkbox-label" | "checkmenuitem" | "dualbutton" | "groupbox" | "listitem" | "menuarrow" | "menubar" | "menucheckbox" | "menuimage" | "menuitem" | "menuitemtext" | "menulist-text" | "menulist-textfield" | "menupopup" | "menuradio" | "menuseparator" | "meterbar" | "meterchunk" | "progressbar" | "progressbar-vertical" | "progresschunk" | "progresschunk-vertical" | "radio-container" | "radio-label" | "radiomenuitem" | "range" | "range-thumb" | "resizer" | "resizerpanel" | "scale-horizontal" | "scale-vertical" | "scalethumb-horizontal" | "scalethumb-vertical" | "scalethumbend" | "scalethumbstart" | "scalethumbtick" | "scrollbarbutton-down" | "scrollbarbutton-left" | "scrollbarbutton-right" | "scrollbarbutton-up" | "scrollbarthumb-horizontal" | "scrollbarthumb-vertical" | "scrollbartrack-horizontal" | "scrollbartrack-vertical" | "separator" | "sheet" | "spinner" | "spinner-downbutton" | "spinner-textfield" | "spinner-upbutton" | "splitter" | "statusbar" | "statusbarpanel" | "tab" | "tab-scroll-arrow-back" | "tab-scroll-arrow-forward" | "tabpanel" | "tabpanels" | "textfield-multiline" | "toolbar" | "toolbarbutton" | "toolbarbutton-dropdown" | "toolbargripper" | "toolbox" | "tooltip" | "treeheader" | "treeheadercell" | "treeheadersortarrow" | "treeitem" | "treeline" | "treetwisty" | "treetwistyopen" | "treeview" | undefined; | ||
| MozBackfaceVisibility?: "inherit" | "hidden" | "visible" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| MozBorderBottomColors?: string | undefined; | ||
| MozBorderEndColor?: string | undefined; | ||
| MozBorderEndStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| MozBorderEndWidth?: string | number | undefined; | ||
| MozBorderLeftColors?: string | undefined; | ||
| MozBorderRightColors?: string | undefined; | ||
| MozBorderStartColor?: string | undefined; | ||
| MozBorderStartStyle?: "none" | "inherit" | "hidden" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined; | ||
| MozBorderTopColors?: string | undefined; | ||
| MozBoxSizing?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "border-box" | "content-box" | undefined; | ||
| MozColumnCount?: number | "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| MozColumnFill?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "balance" | "balance-all" | undefined; | ||
| MozColumnGap?: string | number | undefined; | ||
| MozColumnRuleColor?: string | undefined; | ||
| MozColumnRuleStyle?: string | undefined; | ||
| MozColumnRuleWidth?: string | number | undefined; | ||
| MozColumnWidth?: string | number | undefined; | ||
| MozContextProperties?: string | undefined; | ||
| MozFloatEdge?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "border-box" | "content-box" | "padding-box" | "margin-box" | undefined; | ||
| MozFontFeatureSettings?: string | undefined; | ||
| MozFontLanguageOverride?: string | undefined; | ||
| MozForceBrokenImageIcon?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| MozHyphens?: "auto" | "none" | "manual" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| MozImageRegion?: string | undefined; | ||
| MozMarginEnd?: string | number | undefined; | ||
| MozMarginStart?: string | number | undefined; | ||
| MozOrient?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "block" | "inline" | "horizontal" | "vertical" | undefined; | ||
| MozOutlineRadiusBottomleft?: string | number | undefined; | ||
| MozOutlineRadiusBottomright?: string | number | undefined; | ||
| MozOutlineRadiusTopleft?: string | number | undefined; | ||
| MozOutlineRadiusTopright?: string | number | undefined; | ||
| MozPaddingEnd?: string | number | undefined; | ||
| MozPaddingStart?: string | number | undefined; | ||
| MozPerspective?: string | number | undefined; | ||
| MozPerspectiveOrigin?: string | number | undefined; | ||
| MozStackSizing?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "ignore" | "stretch-to-fit" | undefined; | ||
| MozTabSize?: string | number | undefined; | ||
| MozTextSizeAdjust?: string | undefined; | ||
| MozTransformOrigin?: string | number | undefined; | ||
| MozTransformStyle?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "flat" | "preserve-3d" | undefined; | ||
| MozTransitionDelay?: string | undefined; | ||
| MozTransitionDuration?: string | undefined; | ||
| MozTransitionProperty?: string | undefined; | ||
| MozTransitionTimingFunction?: string | undefined; | ||
| MozUserFocus?: "normal" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "ignore" | "select-after" | "select-all" | "select-before" | "select-menu" | "select-same" | undefined; | ||
| MozUserModify?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "read-only" | "read-write" | "write-only" | undefined; | ||
| MozUserSelect?: "all" | "auto" | "none" | "inherit" | "text" | "-moz-initial" | "initial" | "revert" | "unset" | "contain" | "-moz-none" | "element" | undefined; | ||
| MozWindowDragging?: "inherit" | "drag" | "-moz-initial" | "initial" | "revert" | "unset" | "no-drag" | undefined; | ||
| msAccelerator?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "false" | "true" | undefined; | ||
| msAlignSelf?: string | undefined; | ||
| msBlockProgression?: "inherit" | "lr" | "rl" | "-moz-initial" | "initial" | "revert" | "unset" | "bt" | "tb" | undefined; | ||
| msContentZoomChaining?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "chained" | undefined; | ||
| msContentZoomLimitMax?: string | undefined; | ||
| msContentZoomLimitMin?: string | undefined; | ||
| msContentZoomSnapPoints?: string | undefined; | ||
| msContentZoomSnapType?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "mandatory" | "proximity" | undefined; | ||
| msContentZooming?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "zoom" | undefined; | ||
| msFilter?: string | undefined; | ||
| msFlexDirection?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined; | ||
| msFlexPositive?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| msFlowFrom?: string | undefined; | ||
| msFlowInto?: string | undefined; | ||
| msGridColumns?: string | number | undefined; | ||
| msGridRows?: string | number | undefined; | ||
| msHighContrastAdjust?: "auto" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| msHyphenateLimitChars?: string | number | undefined; | ||
| msHyphenateLimitLines?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "no-limit" | undefined; | ||
| msHyphenateLimitZone?: string | number | undefined; | ||
| msHyphens?: "auto" | "none" | "manual" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| msImeAlign?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "after" | undefined; | ||
| msLineBreak?: "auto" | "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "strict" | "loose" | undefined; | ||
| msOrder?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| msOverflowStyle?: "auto" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "-ms-autohiding-scrollbar" | "scrollbar" | undefined; | ||
| msOverflowX?: "auto" | "inherit" | "hidden" | "visible" | "scroll" | "-moz-initial" | "initial" | "revert" | "unset" | "clip" | undefined; | ||
| msOverflowY?: "auto" | "inherit" | "hidden" | "visible" | "scroll" | "-moz-initial" | "initial" | "revert" | "unset" | "clip" | undefined; | ||
| msScrollChaining?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "chained" | undefined; | ||
| msScrollLimitXMax?: string | number | undefined; | ||
| msScrollLimitXMin?: string | number | undefined; | ||
| msScrollLimitYMax?: string | number | undefined; | ||
| msScrollLimitYMin?: string | number | undefined; | ||
| msScrollRails?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "railed" | undefined; | ||
| msScrollSnapPointsX?: string | undefined; | ||
| msScrollSnapPointsY?: string | undefined; | ||
| msScrollSnapType?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "mandatory" | "proximity" | undefined; | ||
| msScrollTranslation?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "vertical-to-horizontal" | undefined; | ||
| msScrollbar3dlightColor?: string | undefined; | ||
| msScrollbarArrowColor?: string | undefined; | ||
| msScrollbarBaseColor?: string | undefined; | ||
| msScrollbarDarkshadowColor?: string | undefined; | ||
| msScrollbarFaceColor?: string | undefined; | ||
| msScrollbarHighlightColor?: string | undefined; | ||
| msScrollbarShadowColor?: string | undefined; | ||
| msScrollbarTrackColor?: string | undefined; | ||
| msTextAutospace?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "ideograph-alpha" | "ideograph-numeric" | "ideograph-parenthesis" | "ideograph-space" | undefined; | ||
| msTextCombineHorizontal?: string | undefined; | ||
| msTextOverflow?: string | undefined; | ||
| msTextSizeAdjust?: string | undefined; | ||
| msTouchAction?: string | undefined; | ||
| msTouchSelect?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "grippers" | undefined; | ||
| msTransform?: string | undefined; | ||
| msTransformOrigin?: string | number | undefined; | ||
| msUserSelect?: "none" | "inherit" | "text" | "-moz-initial" | "initial" | "revert" | "unset" | "element" | undefined; | ||
| msWordBreak?: "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "break-word" | "break-all" | "keep-all" | undefined; | ||
| msWrapFlow?: "auto" | "both" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "clear" | "maximum" | undefined; | ||
| msWrapMargin?: string | number | undefined; | ||
| msWrapThrough?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "wrap" | undefined; | ||
| msWritingMode?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl" | undefined; | ||
| OObjectFit?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "contain" | "cover" | "fill" | "scale-down" | undefined; | ||
| OObjectPosition?: string | number | undefined; | ||
| OTabSize?: string | number | undefined; | ||
| OTextOverflow?: string | undefined; | ||
| OTransformOrigin?: string | number | undefined; | ||
| WebkitAlignContent?: string | undefined; | ||
| WebkitAlignItems?: string | undefined; | ||
| WebkitAlignSelf?: string | undefined; | ||
| WebkitAnimationDelay?: string | undefined; | ||
| WebkitAnimationDirection?: string | undefined; | ||
| WebkitAnimationDuration?: string | undefined; | ||
| WebkitAnimationFillMode?: string | undefined; | ||
| WebkitAnimationIterationCount?: string | number | undefined; | ||
| WebkitAnimationName?: string | undefined; | ||
| WebkitAnimationPlayState?: string | undefined; | ||
| WebkitAnimationTimingFunction?: string | undefined; | ||
| WebkitAppearance?: "none" | "inherit" | "button" | "meter" | "textarea" | "-moz-initial" | "initial" | "revert" | "unset" | "button-bevel" | "checkbox" | "listbox" | "menulist" | "menulist-button" | "progress-bar" | "push-button" | "radio" | "searchfield" | "slider-horizontal" | "square-button" | "textfield" | "caret" | "listitem" | "menulist-text" | "menulist-textfield" | "default-button" | "inner-spin-button" | "media-controls-background" | "media-controls-fullscreen-background" | "media-current-time-display" | "media-enter-fullscreen-button" | "media-exit-fullscreen-button" | "media-fullscreen-button" | "media-mute-button" | "media-overlay-play-button" | "media-play-button" | "media-seek-back-button" | "media-seek-forward-button" | "media-slider" | "media-sliderthumb" | "media-time-remaining-display" | "media-toggle-closed-captions-button" | "media-volume-slider" | "media-volume-slider-container" | "media-volume-sliderthumb" | "progress-bar-value" | "searchfield-cancel-button" | "searchfield-decoration" | "searchfield-results-button" | "searchfield-results-decoration" | "slider-vertical" | "sliderthumb-horizontal" | "sliderthumb-vertical" | undefined; | ||
| WebkitBackdropFilter?: string | undefined; | ||
| WebkitBackfaceVisibility?: "inherit" | "hidden" | "visible" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitBackgroundClip?: string | undefined; | ||
| WebkitBackgroundOrigin?: string | undefined; | ||
| WebkitBackgroundSize?: string | number | undefined; | ||
| WebkitBorderBeforeColor?: string | undefined; | ||
| WebkitBorderBeforeStyle?: string | undefined; | ||
| WebkitBorderBeforeWidth?: string | number | undefined; | ||
| WebkitBorderBottomLeftRadius?: string | number | undefined; | ||
| WebkitBorderBottomRightRadius?: string | number | undefined; | ||
| WebkitBorderImageSlice?: string | number | undefined; | ||
| WebkitBorderTopLeftRadius?: string | number | undefined; | ||
| WebkitBorderTopRightRadius?: string | number | undefined; | ||
| WebkitBoxDecorationBreak?: "slice" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "clone" | undefined; | ||
| WebkitBoxReflect?: string | number | undefined; | ||
| WebkitBoxShadow?: string | undefined; | ||
| WebkitBoxSizing?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "border-box" | "content-box" | undefined; | ||
| WebkitClipPath?: string | undefined; | ||
| WebkitColorAdjust?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "economy" | "exact" | undefined; | ||
| WebkitColumnCount?: number | "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitColumnGap?: string | number | undefined; | ||
| WebkitColumnRuleColor?: string | undefined; | ||
| WebkitColumnRuleStyle?: string | undefined; | ||
| WebkitColumnRuleWidth?: string | number | undefined; | ||
| WebkitColumnSpan?: "all" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitColumnWidth?: string | number | undefined; | ||
| WebkitFilter?: string | undefined; | ||
| WebkitFlexBasis?: string | number | undefined; | ||
| WebkitFlexDirection?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined; | ||
| WebkitFlexGrow?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitFlexShrink?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitFlexWrap?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | undefined; | ||
| WebkitFontFeatureSettings?: string | undefined; | ||
| WebkitFontKerning?: "auto" | "normal" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitFontVariantLigatures?: string | undefined; | ||
| WebkitHyphens?: "auto" | "none" | "manual" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitJustifyContent?: string | undefined; | ||
| WebkitLineBreak?: "auto" | "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "strict" | "loose" | undefined; | ||
| WebkitLineClamp?: number | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitMarginEnd?: string | number | undefined; | ||
| WebkitMarginStart?: string | number | undefined; | ||
| WebkitMaskAttachment?: string | undefined; | ||
| WebkitMaskClip?: string | undefined; | ||
| WebkitMaskComposite?: string | undefined; | ||
| WebkitMaskImage?: string | undefined; | ||
| WebkitMaskOrigin?: string | undefined; | ||
| WebkitMaskPosition?: string | number | undefined; | ||
| WebkitMaskPositionX?: string | number | undefined; | ||
| WebkitMaskPositionY?: string | number | undefined; | ||
| WebkitMaskRepeat?: string | undefined; | ||
| WebkitMaskRepeatX?: "repeat" | "round" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "no-repeat" | "space" | undefined; | ||
| WebkitMaskRepeatY?: "repeat" | "round" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "no-repeat" | "space" | undefined; | ||
| WebkitMaskSize?: string | number | undefined; | ||
| WebkitMaxInlineSize?: string | number | undefined; | ||
| WebkitOrder?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitOverflowScrolling?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "touch" | undefined; | ||
| WebkitPaddingEnd?: string | number | undefined; | ||
| WebkitPaddingStart?: string | number | undefined; | ||
| WebkitPerspective?: string | number | undefined; | ||
| WebkitPerspectiveOrigin?: string | number | undefined; | ||
| WebkitScrollSnapType?: string | undefined; | ||
| WebkitShapeMargin?: string | number | undefined; | ||
| WebkitTapHighlightColor?: string | undefined; | ||
| WebkitTextCombine?: string | undefined; | ||
| WebkitTextDecorationColor?: string | undefined; | ||
| WebkitTextDecorationLine?: string | undefined; | ||
| WebkitTextDecorationSkip?: string | undefined; | ||
| WebkitTextDecorationStyle?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "solid" | "wavy" | undefined; | ||
| WebkitTextEmphasisColor?: string | undefined; | ||
| WebkitTextEmphasisPosition?: string | undefined; | ||
| WebkitTextEmphasisStyle?: string | undefined; | ||
| WebkitTextFillColor?: string | undefined; | ||
| WebkitTextOrientation?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "mixed" | "sideways" | "upright" | undefined; | ||
| WebkitTextSizeAdjust?: string | undefined; | ||
| WebkitTextStrokeColor?: string | undefined; | ||
| WebkitTextStrokeWidth?: string | number | undefined; | ||
| WebkitTouchCallout?: "none" | "default" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitTransform?: string | undefined; | ||
| WebkitTransformOrigin?: string | number | undefined; | ||
| WebkitTransformStyle?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "flat" | "preserve-3d" | undefined; | ||
| WebkitTransitionDelay?: string | undefined; | ||
| WebkitTransitionDuration?: string | undefined; | ||
| WebkitTransitionProperty?: string | undefined; | ||
| WebkitTransitionTimingFunction?: string | undefined; | ||
| WebkitUserModify?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "read-only" | "read-write" | "read-write-plaintext-only" | undefined; | ||
| WebkitUserSelect?: "all" | "auto" | "none" | "inherit" | "text" | "-moz-initial" | "initial" | "revert" | "unset" | "contain" | "-moz-none" | "element" | undefined; | ||
| WebkitWritingMode?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl" | undefined; | ||
| WebkitmaskSize?: string | number | undefined; | ||
| MozAnimation?: string | number | undefined; | ||
| MozBorderImage?: string | number | undefined; | ||
| MozColumnRule?: string | number | undefined; | ||
| MozColumns?: string | number | undefined; | ||
| MozTransition?: string | undefined; | ||
| msContentZoomLimit?: string | undefined; | ||
| msContentZoomSnap?: string | undefined; | ||
| msFlex?: string | number | undefined; | ||
| msScrollLimit?: string | undefined; | ||
| msScrollSnapX?: string | undefined; | ||
| msScrollSnapY?: string | undefined; | ||
| WebkitAnimation?: string | number | undefined; | ||
| WebkitBorderBefore?: string | number | undefined; | ||
| WebkitBorderImage?: string | number | undefined; | ||
| WebkitBorderRadius?: string | number | undefined; | ||
| WebkitColumnRule?: string | number | undefined; | ||
| WebkitColumns?: string | number | undefined; | ||
| WebkitFlex?: string | number | undefined; | ||
| WebkitFlexFlow?: string | undefined; | ||
| WebkitMask?: string | number | undefined; | ||
| WebkitTextEmphasis?: string | undefined; | ||
| WebkitTextStroke?: string | number | undefined; | ||
| WebkitTransition?: string | undefined; | ||
| boxAlign?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined; | ||
| boxDirection?: "normal" | "reverse" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| boxFlex?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| boxFlexGroup?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| boxLines?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "multiple" | "single" | undefined; | ||
| boxOrdinalGroup?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| boxOrient?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal" | "vertical" | "block-axis" | "inline-axis" | undefined; | ||
| boxPack?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined; | ||
| clip?: string | undefined; | ||
| fontVariantAlternates?: string | undefined; | ||
| gridColumnGap?: string | number | undefined; | ||
| gridGap?: string | number | undefined; | ||
| gridRowGap?: string | number | undefined; | ||
| imeMode?: "auto" | "normal" | "active" | "disabled" | "inactive" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| offsetBlock?: string | number | undefined; | ||
| offsetBlockEnd?: string | number | undefined; | ||
| offsetBlockStart?: string | number | undefined; | ||
| offsetInline?: string | number | undefined; | ||
| offsetInlineEnd?: string | number | undefined; | ||
| offsetInlineStart?: string | number | undefined; | ||
| scrollSnapCoordinate?: string | number | undefined; | ||
| scrollSnapDestination?: string | number | undefined; | ||
| scrollSnapPointsX?: string | undefined; | ||
| scrollSnapPointsY?: string | undefined; | ||
| scrollSnapTypeX?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "mandatory" | "proximity" | undefined; | ||
| scrollSnapTypeY?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "mandatory" | "proximity" | undefined; | ||
| textCombineHorizontal?: string | undefined; | ||
| KhtmlBoxAlign?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined; | ||
| KhtmlBoxDirection?: "normal" | "reverse" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| KhtmlBoxFlex?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| KhtmlBoxFlexGroup?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| KhtmlBoxLines?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "multiple" | "single" | undefined; | ||
| KhtmlBoxOrdinalGroup?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| KhtmlBoxOrient?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal" | "vertical" | "block-axis" | "inline-axis" | undefined; | ||
| KhtmlBoxPack?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined; | ||
| KhtmlLineBreak?: "auto" | "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "strict" | "loose" | undefined; | ||
| KhtmlOpacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| KhtmlUserSelect?: "all" | "auto" | "none" | "inherit" | "text" | "-moz-initial" | "initial" | "revert" | "unset" | "contain" | "-moz-none" | "element" | undefined; | ||
| MozBackgroundClip?: string | undefined; | ||
| MozBackgroundInlinePolicy?: "slice" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "clone" | undefined; | ||
| MozBackgroundOrigin?: string | undefined; | ||
| MozBackgroundSize?: string | number | undefined; | ||
| MozBinding?: string | undefined; | ||
| MozBorderRadius?: string | number | undefined; | ||
| MozBorderRadiusBottomleft?: string | number | undefined; | ||
| MozBorderRadiusBottomright?: string | number | undefined; | ||
| MozBorderRadiusTopleft?: string | number | undefined; | ||
| MozBorderRadiusTopright?: string | number | undefined; | ||
| MozBoxAlign?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined; | ||
| MozBoxDirection?: "normal" | "reverse" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| MozBoxFlex?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| MozBoxOrdinalGroup?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| MozBoxOrient?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal" | "vertical" | "block-axis" | "inline-axis" | undefined; | ||
| MozBoxPack?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined; | ||
| MozBoxShadow?: string | undefined; | ||
| MozOpacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| MozOutline?: string | number | undefined; | ||
| MozOutlineColor?: string | undefined; | ||
| MozOutlineRadius?: string | number | undefined; | ||
| MozOutlineStyle?: string | undefined; | ||
| MozOutlineWidth?: string | number | undefined; | ||
| MozTextAlignLast?: "auto" | "left" | "right" | "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined; | ||
| MozTextBlink?: "blink" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| MozTextDecorationColor?: string | undefined; | ||
| MozTextDecorationLine?: string | undefined; | ||
| MozTextDecorationStyle?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "solid" | "wavy" | undefined; | ||
| MozUserInput?: "auto" | "none" | "disabled" | "enabled" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| MozWindowShadow?: "none" | "default" | "inherit" | "menu" | "-moz-initial" | "initial" | "revert" | "unset" | "sheet" | "tooltip" | undefined; | ||
| msImeMode?: "auto" | "normal" | "active" | "disabled" | "inactive" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| OAnimation?: string | number | undefined; | ||
| OAnimationDelay?: string | undefined; | ||
| OAnimationDirection?: string | undefined; | ||
| OAnimationDuration?: string | undefined; | ||
| OAnimationFillMode?: string | undefined; | ||
| OAnimationIterationCount?: string | number | undefined; | ||
| OAnimationName?: string | undefined; | ||
| OAnimationPlayState?: string | undefined; | ||
| OAnimationTimingFunction?: string | undefined; | ||
| OBackgroundSize?: string | number | undefined; | ||
| OBorderImage?: string | number | undefined; | ||
| OTransform?: string | undefined; | ||
| OTransition?: string | undefined; | ||
| OTransitionDelay?: string | undefined; | ||
| OTransitionDuration?: string | undefined; | ||
| OTransitionProperty?: string | undefined; | ||
| OTransitionTimingFunction?: string | undefined; | ||
| WebkitBoxAlign?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined; | ||
| WebkitBoxDirection?: "normal" | "reverse" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitBoxFlex?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitBoxFlexGroup?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitBoxLines?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "multiple" | "single" | undefined; | ||
| WebkitBoxOrdinalGroup?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| WebkitBoxOrient?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal" | "vertical" | "block-axis" | "inline-axis" | undefined; | ||
| WebkitBoxPack?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined; | ||
| WebkitScrollSnapPointsX?: string | undefined; | ||
| WebkitScrollSnapPointsY?: string | undefined; | ||
| alignmentBaseline?: "auto" | "inherit" | "alphabetic" | "hanging" | "ideographic" | "middle" | "-moz-initial" | "initial" | "revert" | "unset" | "baseline" | "after-edge" | "before-edge" | "central" | "mathematical" | "text-after-edge" | "text-before-edge" | undefined; | ||
| baselineShift?: string | number | undefined; | ||
| clipRule?: "evenodd" | "nonzero" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| colorInterpolation?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "linearRGB" | "sRGB" | undefined; | ||
| colorRendering?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "optimizeSpeed" | "optimizeQuality" | undefined; | ||
| dominantBaseline?: "auto" | "inherit" | "alphabetic" | "hanging" | "ideographic" | "middle" | "-moz-initial" | "initial" | "revert" | "unset" | "central" | "mathematical" | "text-after-edge" | "text-before-edge" | "no-change" | "reset-size" | "use-script" | undefined; | ||
| fill?: string | undefined; | ||
| fillOpacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| fillRule?: "evenodd" | "nonzero" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| floodColor?: string | undefined; | ||
| floodOpacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| glyphOrientationVertical?: string | number | undefined; | ||
| lightingColor?: string | undefined; | ||
| marker?: string | undefined; | ||
| markerEnd?: string | undefined; | ||
| markerMid?: string | undefined; | ||
| markerStart?: string | undefined; | ||
| shapeRendering?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "geometricPrecision" | "optimizeSpeed" | "crispEdges" | undefined; | ||
| stopColor?: string | undefined; | ||
| stopOpacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| stroke?: string | undefined; | ||
| strokeDasharray?: string | number | undefined; | ||
| strokeDashoffset?: string | number | undefined; | ||
| strokeLinecap?: "square" | "butt" | "round" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| strokeLinejoin?: "round" | "bevel" | "miter" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| strokeMiterlimit?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| strokeOpacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| strokeWidth?: string | number | undefined; | ||
| textAnchor?: "end" | "start" | "inherit" | "middle" | "-moz-initial" | "initial" | "revert" | "unset" | undefined; | ||
| vectorEffect?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "non-scaling-stroke" | undefined; | ||
| }; | ||
| export declare const useSnowfallStyle: (overrides?: import("react").CSSProperties | undefined) => React.CSSProperties; | ||
| /** | ||
@@ -781,3 +34,3 @@ * Same as `React.useEffect` but uses a deep comparison on the dependency array. This should only | ||
| */ | ||
| export declare function useDeepCompareEffect(effect: EffectCallback, deps: DependencyList): void; | ||
| export declare function useDeepCompareEffect(effect: React.EffectCallback, deps: React.DependencyList): void; | ||
| /** | ||
@@ -784,0 +37,0 @@ * Utility hook to stabilize a reference to a value, the returned value will always match the input value |
@@ -55,2 +55,3 @@ "use strict"; | ||
| var createSnowflakes = function createSnowflakes(canvasRef, amount, config) { | ||
| if (!canvasRef.current) return []; | ||
| var snowflakes = []; | ||
@@ -98,3 +99,3 @@ | ||
| return snowflakes.map(function (snowflake) { | ||
| snowflake.config = config; | ||
| snowflake.updateConfig(config); | ||
| return snowflake; | ||
@@ -177,5 +178,6 @@ }); | ||
| ref.current = deps; | ||
| } | ||
| } // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| (0, _react.useEffect)(effect, ref.current); | ||
| return (0, _react.useEffect)(effect, ref.current); | ||
| } | ||
@@ -182,0 +184,0 @@ /** |
@@ -39,3 +39,3 @@ "use strict"; | ||
| var mergedStyle = (0, _hooks.useSnowfallStyle)(style); | ||
| var canvasRef = (0, _react.useRef)(); | ||
| var canvasRef = (0, _react.useRef)(null); | ||
| var canvasSize = (0, _hooks.useComponentSize)(canvasRef); | ||
@@ -52,7 +52,2 @@ var animationFrame = (0, _react.useRef)(0); | ||
| var snowflakes = (0, _hooks.useSnowflakes)(canvasRef, snowflakeCount, config); | ||
| var updateCanvasRef = function updateCanvasRef(element) { | ||
| canvasRef.current = element; | ||
| }; | ||
| var render = (0, _react.useCallback)(function () { | ||
@@ -73,3 +68,3 @@ var framesPassed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; | ||
| snowflakes.forEach(function (snowflake) { | ||
| return snowflake.draw(canvas, ctx); | ||
| return snowflake.draw(ctx); | ||
| }); | ||
@@ -96,6 +91,7 @@ } | ||
| return /*#__PURE__*/_react["default"].createElement("canvas", { | ||
| ref: updateCanvasRef, | ||
| ref: canvasRef, | ||
| height: canvasSize.height, | ||
| width: canvasSize.width, | ||
| style: mergedStyle | ||
| style: mergedStyle, | ||
| "data-testid": "SnowfallCanvas" | ||
| }); | ||
@@ -102,0 +98,0 @@ }; |
@@ -10,3 +10,3 @@ export interface SnowflakeProps { | ||
| */ | ||
| radius: [minimumRadius: number, maximumRadius: number]; | ||
| radius: [number, number]; | ||
| /** | ||
@@ -22,3 +22,3 @@ * The minimum and maximum speed of the snowflake. | ||
| */ | ||
| speed: [minimumSpeed: number, maximumSpeed: number]; | ||
| speed: [number, number]; | ||
| /** | ||
@@ -34,3 +34,3 @@ * The minimum and maximum wind of the snowflake. | ||
| */ | ||
| wind: [minimumWind: number, maximumWind: number]; | ||
| wind: [number, number]; | ||
| /** | ||
@@ -46,14 +46,16 @@ * The frequency in frames that the wind and speed values | ||
| export declare const defaultConfig: SnowflakeProps; | ||
| /** An individual snowflake that will update it's location every call to `draw` */ | ||
| /** | ||
| * 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 { | ||
| config: SnowflakeConfig; | ||
| private config; | ||
| private params; | ||
| private framesSinceLastUpdate; | ||
| constructor(canvas: HTMLCanvasElement, config?: SnowflakeConfig); | ||
| private get fullConfig(); | ||
| draw: (canvas: HTMLCanvasElement, inputCtx?: CanvasRenderingContext2D | undefined) => void; | ||
| private translate; | ||
| updateConfig(config: SnowflakeConfig): void; | ||
| private updateTargetParams; | ||
| update: (canvas: HTMLCanvasElement, framesPassed?: number | undefined) => void; | ||
| update(canvas: HTMLCanvasElement, framesPassed?: number): void; | ||
| draw(ctx: CanvasRenderingContext2D): void; | ||
| } | ||
| export default Snowflake; |
@@ -43,7 +43,8 @@ "use strict"; | ||
| /** An individual snowflake that will update it's location every call to `draw` */ | ||
| /** | ||
| * An individual snowflake that will update it's location every call to `update` | ||
| * and draw itself to the canvas every call to `draw`. | ||
| */ | ||
| var Snowflake = /*#__PURE__*/function () { | ||
| function Snowflake(_canvas) { | ||
| var _this = this; | ||
| function Snowflake(canvas) { | ||
| var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
@@ -59,17 +60,37 @@ | ||
| _defineProperty(this, "draw", function (canvas, inputCtx) { | ||
| var ctx = inputCtx || canvas.getContext('2d'); | ||
| // Set custom config | ||
| this.updateConfig(config); // Setting initial parameters | ||
| if (ctx) { | ||
| ctx.beginPath(); | ||
| ctx.arc(_this.params.x, _this.params.y, _this.params.radius, 0, 2 * Math.PI); | ||
| ctx.fillStyle = _this.fullConfig.color; | ||
| ctx.closePath(); | ||
| ctx.fill(); | ||
| } | ||
| }); | ||
| var _this$config = this.config, | ||
| radius = _this$config.radius, | ||
| wind = _this$config.wind, | ||
| speed = _this$config.speed; | ||
| this.params = { | ||
| x: (0, _utils.random)(0, canvas.offsetWidth), | ||
| y: (0, _utils.random)(-canvas.offsetHeight, 0), | ||
| radius: _utils.random.apply(void 0, _toConsumableArray(radius)), | ||
| speed: _utils.random.apply(void 0, _toConsumableArray(speed)), | ||
| wind: _utils.random.apply(void 0, _toConsumableArray(wind)), | ||
| nextSpeed: _utils.random.apply(void 0, _toConsumableArray(wind)), | ||
| nextWind: _utils.random.apply(void 0, _toConsumableArray(speed)) | ||
| }; | ||
| this.framesSinceLastUpdate = 0; | ||
| } | ||
| _defineProperty(this, "translate", function (canvas) { | ||
| _createClass(Snowflake, [{ | ||
| key: "updateConfig", | ||
| value: function updateConfig(config) { | ||
| this.config = _objectSpread(_objectSpread({}, defaultConfig), config); | ||
| } | ||
| }, { | ||
| key: "updateTargetParams", | ||
| value: function updateTargetParams() { | ||
| this.params.nextSpeed = _utils.random.apply(void 0, _toConsumableArray(this.config.speed)); | ||
| this.params.nextWind = _utils.random.apply(void 0, _toConsumableArray(this.config.wind)); | ||
| } | ||
| }, { | ||
| key: "update", | ||
| value: function update(canvas) { | ||
| var framesPassed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; | ||
| var _this$params = _this.params, | ||
| var _this$params = this.params, | ||
| x = _this$params.x, | ||
@@ -82,48 +103,22 @@ y = _this$params.y, | ||
| _this.params.x = (x + wind * framesPassed) % canvas.offsetWidth; | ||
| _this.params.y = (y + speed * framesPassed) % canvas.offsetHeight; // Update the wind and speed towards the desired values | ||
| this.params.x = (x + wind * framesPassed) % canvas.offsetWidth; | ||
| this.params.y = (y + speed * framesPassed) % canvas.offsetHeight; // Update the wind and speed towards the desired values | ||
| _this.params.speed = (0, _utils.lerp)(speed, nextSpeed, 0.01); | ||
| _this.params.wind = (0, _utils.lerp)(wind, nextWind, 0.01); | ||
| this.params.speed = (0, _utils.lerp)(speed, nextSpeed, 0.01); | ||
| this.params.wind = (0, _utils.lerp)(wind, nextWind, 0.01); | ||
| if (_this.framesSinceLastUpdate++ > _this.fullConfig.changeFrequency) { | ||
| _this.updateTargetParams(); | ||
| _this.framesSinceLastUpdate = 0; | ||
| if (this.framesSinceLastUpdate++ > this.config.changeFrequency) { | ||
| this.updateTargetParams(); | ||
| this.framesSinceLastUpdate = 0; | ||
| } | ||
| }); | ||
| _defineProperty(this, "updateTargetParams", function () { | ||
| _this.params.nextSpeed = _utils.random.apply(void 0, _toConsumableArray(_this.fullConfig.speed)); | ||
| _this.params.nextWind = _utils.random.apply(void 0, _toConsumableArray(_this.fullConfig.wind)); | ||
| }); | ||
| _defineProperty(this, "update", function (canvas, framesPassed) { | ||
| _this.translate(canvas, framesPassed); | ||
| }); | ||
| // Set custom config | ||
| this.config = config; // Setting initial parameters | ||
| var _this$fullConfig = this.fullConfig, | ||
| radius = _this$fullConfig.radius, | ||
| _wind = _this$fullConfig.wind, | ||
| _speed = _this$fullConfig.speed; | ||
| this.params = { | ||
| x: (0, _utils.random)(0, _canvas.offsetWidth), | ||
| y: (0, _utils.random)(-_canvas.offsetHeight, 0), | ||
| radius: _utils.random.apply(void 0, _toConsumableArray(radius)), | ||
| speed: _utils.random.apply(void 0, _toConsumableArray(_speed)), | ||
| wind: _utils.random.apply(void 0, _toConsumableArray(_wind)), | ||
| nextSpeed: _utils.random.apply(void 0, _toConsumableArray(_wind)), | ||
| nextWind: _utils.random.apply(void 0, _toConsumableArray(_speed)) | ||
| }; | ||
| this.framesSinceLastUpdate = 0; | ||
| } | ||
| _createClass(Snowflake, [{ | ||
| key: "fullConfig", | ||
| get: function get() { | ||
| return _objectSpread(_objectSpread({}, defaultConfig), this.config); | ||
| } | ||
| }, { | ||
| key: "draw", | ||
| value: function draw(ctx) { | ||
| ctx.beginPath(); | ||
| ctx.arc(this.params.x, this.params.y, this.params.radius, 0, 2 * Math.PI); | ||
| ctx.fillStyle = this.config.color; | ||
| ctx.closePath(); | ||
| ctx.fill(); | ||
| } | ||
| }]); | ||
@@ -130,0 +125,0 @@ |
@@ -19,5 +19,5 @@ /** | ||
| */ | ||
| export declare function getSize(element?: HTMLElement): { | ||
| export declare function getSize(element?: HTMLElement | null): { | ||
| height: number; | ||
| width: number; | ||
| }; |
| { | ||
| "name": "react-snowfall", | ||
| "version": "1.1.1", | ||
| "version": "1.1.2", | ||
| "description": "A react component that creates a snowfall effect", | ||
| "main": "./lib/Snowfall.js", | ||
| "sideEffects": false, | ||
| "scripts": { | ||
| "generate-types": "tsc --emitDeclarationOnly --declarationDir ./lib", | ||
| "build": "npm run generate-types && babel ./src --out-dir lib --extensions \".ts,.tsx\" --source-maps", | ||
| "build": "npm run generate-types && babel ./src --out-dir lib --extensions \".ts,.tsx\" --ignore \"src/**/*.test.tsx\",\"src/**/*.test.ts\",\"src/__mocks__/**/*\" --source-maps", | ||
| "watch": "npm run build -- --watch", | ||
| "test": "jest", | ||
| "release": "standard-version" | ||
@@ -44,4 +46,8 @@ }, | ||
| "@babel/preset-typescript": "^7.13.0", | ||
| "@types/react": "^16.8.19", | ||
| "@types/react-dom": "^16.8.4", | ||
| "@testing-library/jest-dom": "^5.16.1", | ||
| "@testing-library/react": "^12.1.2", | ||
| "@types/jest": "^27.4.0", | ||
| "@types/react": "^17.0.38", | ||
| "@types/react-dom": "^17.0.11", | ||
| "@types/testing-library__jest-dom": "^5.14.2", | ||
| "@typescript-eslint/eslint-plugin": "^4.15.2", | ||
@@ -54,7 +60,9 @@ "@typescript-eslint/parser": "^4.15.2", | ||
| "eslint-plugin-react-hooks": "^4.2.0", | ||
| "jest": "^27.4.7", | ||
| "jest-canvas-mock": "^2.3.1", | ||
| "prettier": "^2.2.1", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "standard-version": "^9.1.1", | ||
| "typescript": "^4.1.5" | ||
| "typescript": "^4.5.4" | ||
| }, | ||
@@ -61,0 +69,0 @@ "dependencies": { |
@@ -5,3 +5,3 @@  | ||
| [](https://github.com/cahilfoley/react-snowfall) | ||
| [](https://www.npmjs.com/package/react-snowfall) | ||
| [](https://github.com/cahilfoley/react-snowfall/stargazers) | ||
@@ -31,3 +31,3 @@ [](https://conventionalcommits.org) | ||
| Basic usage requires no properties - it will grow to fill the parent element. | ||
| Basic usage requires no properties - it will grow to fill the nearest relative positioned parent element. | ||
@@ -40,6 +40,6 @@ ```jsx | ||
| ReactDOM.render( | ||
| <div style={{ height: 400, width: 400, background: '#282c34' }}> | ||
| <div style={{ height: 400, width: 400, background: '#282c34', position: 'relative' }}> | ||
| <Snowfall /> | ||
| </div>, | ||
| document.querySelector('#app') | ||
| document.querySelector('#app'), | ||
| ) | ||
@@ -62,1 +62,26 @@ ``` | ||
| ``` | ||
| ## Positioning | ||
| The snowfall container is absolute positioned and has the following default styles (see [the definition](https://github.com/cahilfoley/react-snowfall/blob/a8e865e82cac3221930773cdfd6b90eeb0b34247/src/config.ts#L4-L10)): | ||
| ```css | ||
| 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: | ||
| ```jsx | ||
| <Snowfall | ||
| style={{ | ||
| position: 'fixed', | ||
| width: '100vw', | ||
| height: '100vh' | ||
| }} | ||
| /> | ||
| ``` |
@@ -19,3 +19,4 @@ { | ||
| }, | ||
| "include": ["src"] | ||
| "include": ["src"], | ||
| "exclude": ["src/**/*.test.tsx", "src/**/*.test.ts", "src/__mocks__/**/*"] | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by10.34%
32
- Number of lines in readme file
- increased by42.37%
84
Worsened metrics
- Total package byte prevSize
- decreased by-37.52%
78334
- Dev dependency count
- increased by28.57%
27
- Lines of code
- decreased by-31.96%
1007
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes