DEV Community

Cover image for Introducing DIVZ - a React component to scroll, swipe & zoom through content on the 3D z-axis

Introducing DIVZ - a React component to scroll, swipe & zoom through content on the 3D z-axis

Lewis Hunt on May 01, 2024

I'm excited to share DIVZ - a free open source React UI component that lets you scroll, swipe & zoom through HTML elements on the 3D z-axis. Th...
Collapse
 
jgdevelopments profile image
Julian Gaston

Definitely am gonna try this and may even use this for the dev Netlify challenge!

Collapse
 
lewhunt profile image
Lewis Hunt

Awesome, let me know how you get on!

Collapse
 
michaeltharrington profile image
Michael Tharrington

Wow, this is dope! And free!! πŸ™Œ

Collapse
 
lewhunt profile image
Lewis Hunt

Thanks for checking it out!

Collapse
 
leviarista profile image
LevΓ­ Arista • Edited

So cool!! It looks really awesome!! πŸ’―

Collapse
 
lewhunt profile image
Lewis Hunt

nice one, I appreciate it πŸ™

Collapse
 
pavelee profile image
PaweΕ‚ Ciosek

Great job! πŸ‘ so cool! 😎

Collapse
 
lewhunt profile image
Lewis Hunt

much appreciated, cheers!

Collapse
 
antony_clements_02cf7334a profile image
Antony Clements

This is great! I'm trying to use it but keep getting an error around the useRef. I'll dig a little more. Really nice, though

Collapse
 
lewhunt profile image
Lewis Hunt • Edited

I've got a bare-bones demo running in codepen with React 18.3.1 - codepen.io/lewhunt/pen/LYoPaoN

I've also just bumped up divz to v1.1.5 that uses react as peerDependencies instead of dependencies, that might help with the issue you face

Collapse
 
lewhunt profile image
Lewis Hunt

thanks! Yeah that's a common issue with npm libraries in React due to mismatched versions. Did you try a clean npm install of divz in your app, rather than copying the source directory?

Collapse
 
g3nt profile image
G

Looking really good! Could we contribute to it? :))

Collapse
 
lewhunt profile image
Lewis Hunt

Thanks, great to hear! While it's early days I'm focused on maintaining the project's initial direction and quality. However, I'm definitely open to discussing potential contributions, feel free to share your ideas on GitHub!

Collapse
 
arndom profile image
Nabil Alamin

Looks cool, will try it out 🌟

Collapse
 
lewhunt profile image
Lewis Hunt

Cheers!

Collapse
 
jps27cse profile image
Jack Pritom Soren

It's so nice ,,, thank you

Collapse
 
ramkashyap2050 profile image
RamKashyap2050

So Cool!

Collapse
 
mohamedsameh005 profile image
Mohamed Sameh

awesome

Collapse
 
lewhunt profile image
Lewis Hunt

Cheers!

Collapse
 
victorbuarque profile image
Victor Gabriel Reis Buarque da Silva

nice :D

Collapse
 
lewhunt profile image
Lewis Hunt

Thanks! πŸ™

Collapse
 
capscode profile image
capscode

Awesome

Collapse
 
lewhunt profile image
Lewis Hunt

Thanks!

Collapse
 
matthewsaintbull profile image
Matteo Santoro

Lucky I found this today. Thx, will try it out 🀩

Collapse
 
lewhunt profile image
Lewis Hunt

Great! I hope you find it useful

Collapse
 
cantillojo54982 profile image
Joiner

Great, Thanks

Collapse
 
lewhunt profile image
Lewis Hunt

cheers!

Collapse
 
mayor profile image
Mayowa

OMG this looks awesome, I'll most likely use it in my portfolio

Collapse
 
lewhunt profile image
Lewis Hunt

cool!

Collapse
 
brianhoe profile image
Hâñ LübÀñg'À BrïÀñç

Great 😊 think...

Collapse
 
lewhunt profile image
Lewis Hunt

thanks!

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Nice, but scrolling only works one way on mobile on the demos since swiping down is triggering the pull to refresh.

Collapse
 
lewhunt profile image
Lewis Hunt

Thanks for checking it out! I'm not getting that issue on iOS safari or chrome, maybe it's android?

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Firefox

Thread Thread
 
lewhunt profile image
Lewis Hunt

Cheers for the info! Seems like it's OK on latest iOS Firefox, so this 'pull-to-refresh' feature on Firefox might be an Android thing. Should be fixable with a bit of css or js, thanks again!