CODEWITHSUNDEEP
javascriptreactjsreact-particles-js
Ayush Rawat
Ayush Rawat

Reputation: 13

How I can set react-particles-js as background while working on React

I am working on a portfolio with React.js and I have used react-particles-js for my background but it works as a component.
I want this component as a background.
Is there any other alternative of react-particles-js?

This is my Home.js

import Particle from "../Particle";
import Pro from '../../Assets/Pro.svg'
import { Container, Row, Col } from "react-bootstrap";

function Home() {
    return (
        <section>
            <Container fluid className='home-section'>
                <Particle />
                <Container className='home-content'>
                    <Row>
                        <Col md={5} >
                            <img src={Pro} alt="home pic" className="img-fluid" />
                        </Col>
                    </Row>
                </Container>
            </Container>
        </section>
    );
}
export default Home;

Upvotes: 0

Views: 2520

Answers (1)

Caelan
Caelan

Reputation: 1040

You can set the particles as a background using just options. No extra CSS needed.

You can see the fullScreen options here: https://particles.js.org/docs/interfaces/Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html

So, the only thing you need is just add this to your particles config:

{
  fullScreen: {
    enable: true,
    zIndex: 0 // or any value is good for you, if you use -1 set `interactivity.detectsOn` to `"window"` if you need mouse interactions
  },
  /* your config */
}

You can see a working sample here: https://codesandbox.io/s/react-tsparticles-dw43f?file=/src/App.js:190-230

It uses react-tsparticles but it's the same of react-particles-js@3. If you are not using any of these, the settings above won't work.

Upvotes: 1

Related Questions