fix: forward style and other props to wrapper div

[This-Is-Ram]

The style prop was not being forwarded to the wrapper div,
causing it to have no effect.

This change forwards the style and other remaining props
to the wrapper div so they work correctly.

Fixes #119.

Summary by CodeRabbit

• Refactor
  • Optimized component dependency tracking and prop handling in the Particles component for improved efficiency.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Particles component's prop handling is refactored to destructure specific props from the rest, spreading remaining props onto the container div. The useEffect dependency array is shortened, and the container ref assignment logic is modified, potentially affecting the cleanup phase.

Changes

Cohort / File(s)	Summary
Prop Spreading and Ref Handling components/react/lib/Particles.tsx	Dependency array reduced by removing props; props destructured to isolate id, particlesLoaded, options, and url from remaining props, which are now spread onto container div; container ref assignment removed from callback, leaving it potentially undefined for cleanup execution.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A rabbit hops through props with care, 🐰
Spreading joy on elements fair,
Though refs may hide where none assign,
The style now flows—a subtle sign,
Of cleanup paths yet undefined,
But spreading fixes left behind. ✨

🚥 Pre-merge checks | ✅ 5 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes a concerning change: the container binding assignment (container = c;) was removed, which could break cleanup logic and leave container undefined during unmount.	Restore the container assignment (container = c;) to maintain proper cleanup functionality while keeping the props forwarding changes that address issue #119.

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: forward style and other props to wrapper div' accurately describes the main change: forwarding style and remaining props to the wrapper element.
Linked Issues check	✅ Passed	The PR successfully addresses issue #119 by implementing destructuring to separate unused props and spreading remaining props via {...rest} onto the container div, ensuring the style prop and other remaining props are forwarded correctly.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

components/react/lib/Particles.tsx (1)

21-21: Stale closure risk for particlesLoaded after narrowing the dependency array.

Removing props from the dependency array is a good change to avoid unnecessary particle re-initialization. However, props.particlesLoaded is invoked inside the effect (line 15) but isn't tracked in the dependency array, creating a stale closure if the callback identity changes between renders. This is likely fine in practice (the callback fires once on load), but it will trigger react-hooks/exhaustive-deps lint warnings.

A common pattern to address this without causing re-runs is to store the callback in a ref:

♻️ Suggested improvement using a ref

-import { FC, useEffect } from "react";
+import { FC, useEffect, useRef } from "react";
 import type { IParticlesProps } from "./IParticlesProps";
 import { tsParticles, type Container } from "@tsparticles/engine";
 
 const Particles: FC<IParticlesProps> = (props) => {
   const id = props.id ?? "tsparticles";
+  const particlesLoadedRef = useRef(props.particlesLoaded);
+  particlesLoadedRef.current = props.particlesLoaded;
 
   useEffect(() => {
     let container: Container | undefined;
 
     tsParticles
       .load({ id, url: props.url, options: props.options })
       .then((c) => {
         container = c;
-        props.particlesLoaded?.(c);
+        particlesLoadedRef.current?.(c);
       });
 
     return () => {
       container?.destroy();
     };
   }, [id, props.url, props.options]);