add: ID for icon cloud to avoid hydration errors

[maamokun]

When using the Icon Cloud component in an SSR framework such as NextJS, the default behaviour of the upstream react-icon-cloud dependency is to use a UUID for the canvas ID. This is a problem, as the UUID will change between the server and the client and cause a hydration error. Since the upstream dependency also allows for changing the ID with the id prop, I think that having that filled as the default for this component and therefore alleviating the issue above will be better, as it is safe to assume that most users of MagicUI will most likey be using some kind of SSR framework.

[vercel]

@maamokun is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[teaguestockwell]

This change might lead to unexpected behavior when 2 clouds render on one page since they would have the same id

[maamokun]

Then maybe it would be good to have this as a property in the main component

[teaguestockwell]

Since magicui depends on react 18, I would experiment with React.useId to pass a unique, stable id in the render function of IconCloud. That way it might not need to be passed by the consumer / exposed as a property in the wrapped component.

[dillionverma]

We just released a new icon cloud component with zero dependencies. This should help address the legacy code issues and make it easier to maintain.

#488

Please try installing the latest one and testing it out. Also if you have any further feedback would be helpful!

https://magicui.design/docs/components/icon-cloud

Going to close issue for now. Feel free to re-open if you still face an issue.