DEV Community

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

Posted on

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

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. Think of it as a new, experimental way to navigate and present web content πŸ™Œ

https://lewhunt.github.io/divz/


πŸ‘‰ Try out the demos here πŸ‘ˆ

πŸ‘‰ Dive into the source code πŸ‘ˆ


Installation

Developers can install Divz as an open source component to use in React apps. Quickest install method is via the npm install command below:



npm install divz


Enter fullscreen mode Exit fullscreen mode

Usage

After install, import the component and render it in your app or page, wrapping it around your list of divs or other HTML elements:



import { Divz } from "divz";

function App() {
  return (
    <Divz>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </Divz>
  );
}


Enter fullscreen mode Exit fullscreen mode

The demo source code illustrates how the component can be initialised with more props - along with images and videos inside the child divs - for a richer user experience.


Why Divz?

Divz was initially created to showcase portfolio work within a pseudo-3D environment, loosely inspired by Apple's Time Machine interface which allows the user to zoom through historical Finder windows:

https://en.wikipedia.org/wiki/Time_Machine_%28macOS%29


What Sets It Apart?

  • Simplified Integration: Divz is designed to be responsive and easy to use, acting as a straightforward wrapper around a list of divs or other HTML elements.
  • Diverse Applications: While the demos showcase its versatility as a carousel, slideshow, or gallery component, Divz opens the door to a range of other potential uses. Consider it an innovative, experimental method for navigating web content.
  • Broad Device Support: Divz accommodates various navigation modes, including touch for mobile devices, cursor/trackpad for desktop users, and arrow keys for TV devices.

How Does It Work?

Under the hood, Divz performs CSS3 transforms on the core component and the child HTML elements, set dynamically with React TypeScript. The component is packaged using Vite to allow npm library integration.


Support

I hope this has given a good intro to the component and you get some use out of it for your own projects!

πŸ’¬ Fire over a comment if you have any feedback, requests or issues πŸ›

⭐ Give it a Github star if you like the component or want to bookmark it πŸ™

Top comments (36)

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
 
arndom profile image
Nabil Alamin

Looks cool, will try it out 🌟

Collapse
 
lewhunt profile image
Lewis Hunt

Cheers!

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
Gentt

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
 
imshines profile image
Mohan Kumar

This looks so cool!

Collapse
 
jps27cse profile image
Jack Pritom Soren

It's so nice ,,, thank you

Collapse
 
ramkashyap2050 profile image
RamKashyap2050

So Cool!