search

chrvadala / react-svg-pan-zoom

:eyes: A React component that adds pan and zoom features to SVG
https://chrvadala.github.io/react-svg-pan-zoom/
MIT License
684 stars 126 forks source link

use hooks? #139

Open sibelius opened 5 years ago

sibelius commented 5 years ago

hooks would make the code simpler

chrvadala commented 5 years ago

I know, but to integrate hooks I have to rewrite a lot of code, moreover they are only available since React 16.8 and I don't want developers to upgrade to a new version. At the moment I don't have any plan, but let's see it in future.

https://reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy

sibelius commented 5 years ago

it would be cool to provide some hooks like

useZoom, usePan and so on, that would handle mouse events

does this integrate well with d3 zoom behavior?

chrvadala commented 5 years ago

It sounds interesting.... Do you think that add this hooks might require changes into the library itself or can we release it as a standalone library?

I was thinking about a new npm package called react-svg-pan-zoom-hooks... Are you interested to develop it?

sibelius commented 5 years ago

it could just be exported in this package

it still share a lot of existing code already

import { useZoom } from 'react-svg-pan-zoom'

later on we can migrate the existing code to use this hooks

what do you think?

chrvadala commented 5 years ago

Since this is quite experimental, we could start from a standalone package and then move these features into the main. Are you available to work on it?

chrvadala commented 5 years ago

We can get inspiration from here https://github.com/sandiiarov/use-events

sibelius commented 5 years ago

having a hook, we can reuse the same logic on react native

check this https://github.com/garblovians/react-native-svg-pan-zoom

chrvadala commented 5 years ago

I see. Since add hooks supports might require times (for dev and testing), I was trying to figure out a way to do this without hooks feature.

I think that, to create a react native component, you can reuse all the exported features. Look at this file https://github.com/chrvadala/react-svg-pan-zoom/blob/master/src/viewer.js The whole logic is out of this component and can be imported, using react-svg-pan-zoom as dependency https://github.com/chrvadala/react-svg-pan-zoom/blob/master/src/index.js

Just a note: I see that ./features/interactions.js and ./features/interactions-touch.js aren't exported. I'm going to fix them adding them to the export file.

Thought?

TimVanMourik commented 5 years ago

See WIP PR #152

I started rewriting the main compoments and I'll further investigate the useZoom and usePan idea :)