child components not showing

[NoelAnnParisi]

hello! thankfully I found this library, I have two small questions.

1. How do I set the background color(I've tried configuring it in the params object just that doesn't seem to have an effect) 2.How would you suggestI render the rest of my app's components?
   • as of now, the particles render to the screen but not anything else.

Here's what I am working with:

import Main from './components/Main';
import React from 'react';
import ReactDOM from 'react-dom';

import Particle from './container/Particle'

ReactDOM.render(
  <Particle>
    <Main />
  </Particle>,
  document.getElementById('app')
)

I've abstracted Partcle into it's own file becasue of it's length

[NoelAnnParisi]

Quick Update: I modified my code to look like this:

import React from 'react';
import ReactDOM from 'react-dom';

import Particle from './container/Particle'

ReactDOM.render(
  <Particle/>,
  document.getElementById('app')
)

and the Particle component looks like this:

import React, {Component} from 'react'
import Particles from 'react-particles-js';
import Main from '../components/Main';

const Particle = () => {
  return (
    <Particles 
      params={{ alll the params}}>
      <Main />
   </Particles>
  )
}
export default Particle 

but still no luck

[wufe]

Hi, you can take look at the demo source to see how to solve both of your problems:

• The background-color can be set in the element containing the <Particles /> component; in the example I set the background-color in the body element, but it can be done in the element that contains the component i.e. the .wrapper div.

• Currently the component does not support children; you can set however a fixed/absolute/relative position or a float for your particle component, then put other components beside the particle component, and style them to show over the particle component. This is because canvas cannot have children tags.

[NoelAnnParisi]

That's all great information!

I did end up looking at the demo's source code and gave it a fixed position. That code was very helpful and solved the issue 👍🏼

I would have closed the issue earlier but I got lost in coding.

Thank you for the response and tips!

Best,

Noel

On Fri, Jun 30, 2017 at 11:56 PM Simone Bembi notifications@github.com wrote:

Hi, you can take look at the demo source https://github.com/Wufe/react-particles-js/blob/master/demo/index.html to see how to solve both of your problems:

-

The background-color can be set in the element containing the <Particles /> component; in the example I set the background-color in the body element, but it can be done in the element that contains the component i.e. the .wrapper div.

Currently the component does not support children; you can set however a fixed/absolute/relative position or a float for your particle component, then put other components beside the particle component, and style them to show over the particle component. This is because canvas cannot have children tags.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Wufe/react-particles-js/issues/8#issuecomment-312415324, or mute the thread https://github.com/notifications/unsubscribe-auth/AUMvu2TvsLra_i-HVoJveUVaghNeGbMmks5sJe2kgaJpZM4OLLZv .

[wufe]

You are welcome. Feel free to open another issue if you have suggestions for improvement

[NoelAnnParisi]

Thanks!

Last quick observation: I notice that my site only recognizes my mouse after having has clicked in the page.

Is there a way to edit that in the params prop?

Best,

Noel

On Sat, Jul 1, 2017 at 1:10 AM Simone Bembi notifications@github.com wrote:

You are welcome. Feel free to open another issue if you have suggestions for improvement

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Wufe/react-particles-js/issues/8#issuecomment-312418351, or mute the thread https://github.com/notifications/unsubscribe-auth/AUMvu-6YTorFp62zHTZaMAJ8vbhQFkwvks5sJf75gaJpZM4OLLZv .

[NoelAnnParisi]

I do have onhover enabled.

On Sat, Jul 1, 2017 at 12:12 PM Noel Parisi ycleptnoel@gmail.com wrote:

Thanks!

Last quick observation: I notice that my site only recognizes my mouse after having has clicked in the page.

Is there a way to edit that in the params prop?

Best,

Noel

On Sat, Jul 1, 2017 at 1:10 AM Simone Bembi notifications@github.com wrote:

You are welcome. Feel free to open another issue if you have suggestions for improvement

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Wufe/react-particles-js/issues/8#issuecomment-312418351, or mute the thread https://github.com/notifications/unsubscribe-auth/AUMvu-6YTorFp62zHTZaMAJ8vbhQFkwvks5sJf75gaJpZM4OLLZv .

[wufe]

What browser are you using? In chrome the canvas recognizes the mouse without a click

[wufe]

No comments for 3 months. Closing the issue.