Need help finding a component

1

Hello FCC! I am looking for a component and google/ other places are not helping me because they keep picking up key words in the search.

I am looking for a smoke effect as a react component., that's it. Anything that puts either a fog, mist, smoke, etc as a React component.

The problem is when I search "React smoke component" Google gives me a combination of youtube reaction channels or articles about components of volcanic smoke.

I already checked codepen and codesandbox, what are some other sites to check on? I found plenty of javascript or vue projects on codesandbox, just nothing in React. Thanks in advance for pointing me in the right direction.
2

I could be wrong, but this seems more like a styling issue than a component issue. Couldn’t you just figure out how to make a smoke effect and then add it to your component. I’m not sure there is going to be a “smoke component” but I could be wrong?

3

That was an idea, but I didn’t want to re-invent the wheel to make a smoke effect.
Considering I did the same thing with Particles.js I figured there would be a similar thing for styling in the react library, I just can’t find it.

4

Can you explain what you had in mind?

React is a UI library, it’s not designed to provide this kind of thing. But if you are using it, you can just use any JS library, they will basically all always render to canvas, so you do that, and use refs to control things if necessary.

Your issue is that React works by completely rerendering components. Whereas canvas works by redrawing pixels to an element that ideally never gets rerendered. So you have these competing models (it’s also why animation in React is quite hard). That’s why you can’t find much stuff that fits what you’ve got in your head, I think.

5

I used https://www.npmjs.com/package/react-particles-js React particles npm before, and it was really handy to create a stylish effect for the background of my page.
I just assumed someone had made some kind of similar one with smoke or a similar effect

6

Nevermind, it looks like I was using the wrong terminology. I wasn’t looking for a component I was looking for a package.
I found it here :


Thank you for your replies anyway, it lead to me finding it.

1 Like