sghall/react-compound-slider

Question: Will it render correctly on initial render, or only after mounting?

jesseko opened this issue · 3 comments

Will it render correctly on initial render, before componentDidMount gets called?

I'm looking at slider.js

componentDidMount() {
    const { pixelToStep } = this.state
    const { vertical } = this.props

    pixelToStep.setDomain(getSliderDomain(this.slider.current, vertical))
}

Where getSliderDomain then calls getBoundingClientRect, so whatever that returns will be different after mount than before. But from just looking at the code I'm having a hard time seeing if that will cause initial render to be out of place at all.

Are you able to help answer that? Hoping to use on a site where initial render is server-side and there can be a delay before the client catches up.
Thanks

Good question. The short answer is yes you can server render the slider, but this library only has limited say in rendering. The slider only "renders" one div (the outer wrapper) which you provide the styles for and everything else is just pure data (percentages, values, etc) passed down to you. So you control everything that actually is shown for the rail, tracks, handles, ticks, etc.

Running pixelToStep.setDomain(getSliderDomain(this.slider.current, vertical)) does not cause the slider to re-render. Nothing changes in state or in the data that is passed down to you. It needs to take that measurement once the DOM mounts to know how far each movement is in terms of percentage of the whole slider when the user starts to interact with the slider.

Thank you Steve!

Closing this, but could consider adding a note to the docs about it