search

sim51 / react-sigma

Sigma React component
https://sim51.github.io/react-sigma/
Other
158 stars 27 forks source link

Hard working with a CSS framework (Bootstrap, for instance) #18

Closed jacomyal closed 2 years ago

jacomyal commented 2 years ago

I am right now trying to integrate react-sigma-v2 in a Bootstrap based application, and the custom-buttons example does not quite fit: https://github.com/sim51/react-sigma-v2/blob/e4c0ff5e936e04c2d7da1e16893512a8923a65d8/examples/custom-buttons.tsx#L62-L68

I can't simply give a custom class to the button ("btn btn-outline-dark" with Bootstrap, for instance), because the class goes to the parent. And it's not that bad for the zoom / fullscreen buttons since they are based on very usable and simple hooks (even if I think they should be more visible in the examples), but the SearchControl is quite unusable for me and I end up copying the whole source in my app...

I think most web developers using React have, one way or another, some constraints on their markup and/or CSS (internal constraints or framework constraints), and covering those constraints with some custom props will never be good enough. As a user, I really would prefer a well designed suite of hooks to enables those features. And I'm sure exposing components with basic default markups for other users is acceptable, but should be considered secondary.

A good inspiration for this is react-dropzone for instance.

sim51 commented 2 years ago

1) Every "button" can be customized by passing children element to the control. Example :

<FullScreenControl>
  <>
    <BsArrowsFullscreen />
    <BsFullscreenExit />
  </>
</FullScreenControl>

2) All control component are really easy to re-implement, all the logic are done in hooks that are exposed by the library