@stianlarsen/meteors - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

dist/index.js

@@ -33,3 +33,3 @@ "use strict";
 const hooks_1 = require("./hooks");
-const Meteors = ({ speed = 1, size = 50, amount = 20, fallingSide = "left", colorLightmode = undefined, colorDarkmode = undefined, }) => {
+const Meteors = ({ speed = 1, size = 50, amount = 20, fallingSide = "left", colorLightmode = undefined, colorDarkmode = undefined, style, className = "", }) => {
     const containerRef = (0, react_1.useRef)(null);
@@ -74,4 +74,4 @@ const { isDarkmodeActive } = (0, hooks_1.useIsDarkmodeActive)();
     }, [isDarkmodeActive]);
-    return react_1.default.createElement("div", { ref: containerRef, className: meteors_module_css_1.default.container });
+    return (react_1.default.createElement("div", { style: style, ref: containerRef, className: `${meteors_module_css_1.default.container} ${className}` }));
 };
 exports.Meteors = Meteors;

package.json

 {
   "name": "@stianlarsen/meteors",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A dynamic and customizable React component for rendering realistic meteor animations on any container. Supports light and dark modes, and allows configuration for speed, size, and the number of meteors.",
@@ -50,4 +50,5 @@ "main": "dist/index.js",
     "@types/react-dom": "^18",
+    "shx": "^0.3.4",
     "typescript": "^5.5.4"
   }
 }

README.md

@@ -67,10 +67,12 @@ # @stianlarsen/meteors
 
-| Prop             | Type     | Description                                                                          |
-| ---------------- | -------- | ------------------------------------------------------------------------------------ |
-| `speed`          | `number` | The speed of the meteors' fall. Defaults to `1`.                                     |
-| `size`           | `number` | The size of the meteors. Defaults to `50`.                                           |
-| `amount`         | `number` | The number of meteors. Defaults to `20`.                                             |
-| `fallingSide`    | `string` | Determines the direction of the meteor fall (`left` or `right`). Defaults to `left`. |
-| `colorLightmode` | `string` | The color of the meteors in light mode. Defaults to `"rgba(0, 0, 0, 1)"`.            |
-| `colorDarkmode`  | `string` | The color of the meteors in dark mode. Defaults to `"rgba(255, 255, 255, 1)"`.       |
+| Prop             | Type          | Description                                                                          |
+| ---------------- | ------------- | ------------------------------------------------------------------------------------ |
+| `speed`          | `number`      | The speed of the meteors' fall. Defaults to `1`.                                     |
+| `size`           | `number`      | The size of the meteors. Defaults to `50`.                                           |
+| `amount`         | `number`      | The number of meteors. Defaults to `20`.                                             |
+| `fallingSide`    | `string`      | Determines the direction of the meteor fall (`left` or `right`). Defaults to `left`. |
+| `colorLightmode` | `string`      | The color of the meteors in light mode. Defaults to `"rgba(0, 0, 0, 1)"`.            |
+| `colorDarkmode`  | `string`      | The color of the meteors in dark mode. Defaults to `"rgba(255, 255, 255, 1)"`.       |
+| `style`          | `CSSProperty` | Add custom styling. Defaults to `undefined`.                                         |
+| `className`      | `string`      | Add classname to the component. Defaults to `undefined`.                             |
 
@@ -77,0 +79,0 @@ ### Example of Customizing Meteor Behavior

types/types.d.ts

@@ -8,2 +8,4 @@ export interface MeteorProps {
   colorDarkmode?: string;
+  style?: React.CSSProperties;
+  className?: string;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13216

increased by3.27%

Lines of code

195

increased by1.04%

Number of lines in readme file

108

increased by1.89%

Worsened metrics

Dev dependency count

4

increased by33.33%

No dependency changes