retyui / react-quick-pinch-zoom

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
https://react-quick-pinch-zoom.netlify.app/
310 stars 47 forks source link

Enable SSR #30

Closed nicolas-cusan closed 3 years ago

nicolas-cusan commented 3 years ago

Hello @retyui thank you for the great library!

I am using it with a next.js project and needed SSR support for that. What I did:

  1. Add inline <style> tag for css instead of appending to <head> to prevent DOM references.
  2. Moved references to document and window inside the component and initialize in componentDidMount using state

Thank you!

nicolas-cusan commented 3 years ago

Hello @retyui sorry for the late reply,

I just added a new commit, there now is a SSR check outside the component, _body, _html and document are set conditionally as props and state is no longer used. Doing the check in componentDidMount does not work as it is not called during SSR.

retyui commented 3 years ago

@nicolas-cusan good job! thanks

Released 4.0.0