wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.15k stars 106 forks source link

Getting just blank white canvas. #77

Closed andrisole92 closed 5 years ago

andrisole92 commented 5 years ago

Hey, I am just getting an empty Canvas. My code is:

<div className="App">
                <Particles
                    params={{
                        "particles": {
                            "number": {
                                "value": 50
                            },
                            "size": {
                                "value": 3
                            }
                        },
                        "interactivity": {
                            "events": {
                                "onhover": {
                                    "enable": true,
                                    "mode": "repulse"
                                }
                            }
                        }
                    }} />
                <div className="inputContainer">
                    <input type="number" value={this.state.upper_limit} onChange={(e) => {
                        this.setState({upper_limit: e.target.value})
                    }}/>
                    <button type="button" onClick={() => this.getPrimes()}>Find Primes</button>
                </div>
                <div className="response">
                    <div className="response_median">
                        {this.state.primes.length > 0 ? getMedian(this.state.primes) : null}
                    </div>
                    <div className="response_all">
                        {primes}
                    </div>
                </div>
            </div>
sallan306 commented 5 years ago

same, just a blank white canvas. we both must have not installed it correctly but i havent a clue what i did wrong.

wisejayden commented 5 years ago

This should render your Particles component.

const styles = {
      root: {
          fontFamily: "sans-serif",
          textAlign: "center",
          height: "100%",
          background: "#222",
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
      }
};

<div style={styles.root}>
    <Particles />
</div>

I had the same problem until I stumbled upon this functioning example on CodeSandbox.

andrisole92 commented 5 years ago

I just changed the background color with CSS. It solved the problem.

eugene-matvejev commented 5 years ago

same issue, and background was an issue

andrisole92 commented 5 years ago

Change the background colour.

четверг, 22 августа 2019 г. пользователь Eugene Matvejev < notifications@github.com> написал:

same issue

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/Wufe/react-particles-js/issues/77?email_source=notifications&email_token=AECLR4NTOY2MWZN3ESOQWLLQF2RF3A5CNFSM4GXB2SFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD45KSJI#issuecomment-523938085, or mute the thread https://github.com/notifications/unsubscribe-auth/AECLR4J4FL3XLQJQRZPO6WLQF2RF3ANCNFSM4GXB2SFA .

-- Best regards, Andrejs.

bitfede commented 4 years ago

solved my problem, thank you so much!

dssagar93 commented 3 years ago

Change the background colour. четверг, 22 августа 2019 г. пользователь Eugene Matvejev < notifications@github.com> написал: same issue — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#77?email_source=notifications&email_token=AECLR4NTOY2MWZN3ESOQWLLQF2RF3A5CNFSM4GXB2SFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD45KSJI#issuecomment-523938085>, or mute the thread https://github.com/notifications/unsubscribe-auth/AECLR4J4FL3XLQJQRZPO6WLQF2RF3ANCNFSM4GXB2SFA . -- Best regards, Andrejs.

Thanks. I feel dumb already.