isomorphic apps

[Bamieh]

Hello
I havent tried your component yet, but i am getting this error already because my application runs on both the server and client.

ReferenceError: window is not defined\n at node_modules/react-parallax-component/dist/index.min.js:19:2129\

[keske]

Hi Bamieh, thank you, I'll check it!

[MadeInMoon]

I had a the same problem with the lib headroom.js. I had to do the following in my component:

const Headroom = process.env.BROWSER ? require('headroom.js') : '';


class Header extends React.Component {
  componentDidMount() {
      if (process.env.BROWSER) {
         // use here
      }
  }

  render() {...}
}

[Bamieh]

@MadeInMoon yes, true this can be done like such with require, not import. thanks. btw, componentDidMount only runs on the browser.

[MadeInMoon]

@Bamieh thanks ;)

[yayromina]

Any update on supporting isomorphic apps?

[MadeInMoon]

@yayromina, it is actually usable. See the code below.

note: I added the prop scrollContainer, which allows to listen the scroll of a specific container. You could pass window.

1 - Make your own <ParallaxComponent /> component

Take the source component and copy it into a new component in your project

• Add scrollContainer in PropTypes

static propTypes = {
  ...
  scrollContainer: React.PropTypes.object,
  ...
}

• Replace all window variables by this.props.scrollContainer

2 - In your component calling <ParallaxComponent />

• import you own component

import ParallaxComponent from '../../myComponents/ParallaxComponent';

• componentDidMount

componentDidMount() {
  this.setState({ isMounted: true });
}

• render

{this.state.isMounted?
  <ParallaxComponent
    speed={0.05}
    top="60%"
    scrollContainer={this.refs.container}>
    <p>Winter is coming</p>
  </Parallax>
:
 ''
}

---

Not an ideal solution, but sounds good to you?

Anyone did better/simpler with a custom scroll container?