react-svg-pan-zoom
react-hexgrid
react-svg-pan-zoom | react-hexgrid | |
---|---|---|
3 | 3 | |
674 | 304 | |
- | - | |
0.0 | 0.0 | |
12 months ago | 5 months ago | |
JavaScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-svg-pan-zoom
-
Skill Tree Update 4/11/2022
One of the goals of this week was to add statefulness to the skill tree app. Fortunately, pan and zoom works perfectly fine out of the box. Event listeners for keyboard shortcuts were actually pretty easy to add. One portion that I struggled with was experimenting with PUT, PATCH, and POST methods using RTK Query on the frontend. Despite understanding how it all works, there's that nagging feeling in the back my head that's like, there's no way this is going to work. But it did work. I have CRUD functionality now!
-
I wasted two days jerry-rigging a package when the solution was one search away
At first, I was going to use react-indiana-drag-scroll to solve the first problem. And it worked. But I had a feeling that there might be a solution that solved both of these problems at the same time. Searching on libhunt, openbase, and duckduckgo, I found out that this problem is actually very old and the term that better fit my problem was "pan and zoom". Searching with this term, I stumbled upon react-pan-and-zoom-hoc, which helped solve my problem, but it was difficult to fidget with because rather than having a simple component, the component spit out the correct x, y axes translation that would need to be worked into the component's CSS. No bueno. I attempted to jerry-rig this package for two days before giving up and switching to react-svg-pan-zoom, which worked pretty much instantly and was exactly what I needed.
-
What components are you most afraid of building?
Any components that require zoom & pan. I've tried rolling my own for an SVG application but handling the screen-view matrices was too difficult ._. Went with a library instead (https://www.npmjs.com/package/react-svg-pan-zoom).
react-hexgrid
-
[Side Project] Wordbots, an online tactical card game in which players write their own cards, that get parsed into executable JavaScript
the game interface built on top of (a heavily-modded version of) the awesome react-hexgrid package.
-
I wasted two days jerry-rigging a package when the solution was one search away
An example of the former while building the network graph, was react-hexgrid. The documentation was unfinished, but what sold me were the examples and the simplicity of the code.
-
what should I use to build a map-builder?
If you're doing D&D you might want a hex grid like this one though: https://github.com/Hellenic/react-hexgrid
What are some alternatives?
react-image-lightbox - React lightbox component
react-indiana-drag-scroll - React component which implements scrolling via holding the mouse button or touch
react-photo-gallery - React Photo Gallery
react-pan-and-zoom-hoc
react-compare-image - React component to compare two images with a slider
BetterDiscordStuff - my BD plugins & themes, focused on enhancing user experience
react-images - 🌄 A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS
create-react-app - Set up a modern web app by running one command.
react-imgix - React component to display imgix images
honeycomb - Create hex grids easily, in node or the browser.
react-lightgallery - React wrapper for lightgallery.js
React - The library for web and native user interfaces.