React 360 Product Viewer - Let your users view your product or 3D renders

Last update: May 10, 2022

Storybook Contributors Forks Stargazers Issues MIT License LinkedIn


React 360 Product Viewer

Let your users view your product or 3D renders using mouse/touch or set it to autoplay!
See it in action in storybook · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. License

About React 360 Product Viewer

There are a few javascript product viewers out there but none could deliver what I needed. A React component written in Typescript and free! With a lot of customization you can quickly setup this component. All you need is a set of images that represents an animation you would like your users to explore. Either through user-interaction or setting it to autoplay! Point the component to your image folder, set the name, count and image type and you are ready!

It can be controlled either using mouse or touch!

Main features:

  • React component
  • Uses Typescript
  • Free
  • Simple

(back to top)

Built With

(back to top)

Getting Started

WARNING: This project is not yet available for download using NPM , the following test is merely a stub. Will be updated when the component is ready to be used.

Prerequisites

React In order to use the component you need a React project. This was built and tested with 17.0.2 but other versions should work.

Installation

Make sure you have a react project - otherwise use: .

  npx create-react-app my-app --template typescript
  1. Download through npm
 npm add react-360-product-viewer
  1. Add the component to your page, change the properties to fit your need. For all options see storybook
">
<React360Viewer
  imagesBaseUrl="./imageSeries/"
  imagesCount={YOUR_IMAGE_SERIES_COUNT_HERE}
  imagesFiletype="png"
  mouseDragSpeed={20}
/>

(back to top)

Usage

TODO: Add descriptions of all parameters For more example and a playground please refer to storybook

(back to top)

API

Parameter Type Default Description Example
imagesCount number none Set the number of images in your sequence 35
imageBaseUrl string none Set URL from the base of your homepage ./imageSeries/
imagesFileTyp string none Image type (anything that can be rendered in an img tag) png
imageFilenamePrefix string none Add a prefix before the image number shoe (if entire image filename is shoe2.png)
imageInitialIndex number 0 Which imagenumber to show on component load 10
mouseDragSPeed number 20 How fast to change images when pointer moves 20
autoplaySpeed number 10 How fast to change images when autoplay is active 10
reverse boolean false Reverse the order of images displayed. Applicable for both pointer as well as autoplay false
autoplay boolean false Should the images automatically change on component load false
width number 150 With of the image 150
height number 150 Height of the image 150
showRotationIconOnStartup boolean false If true, a small icon representing a rotation which should inform the user that the component can be rotated. false
shouldNotifyEvents boolean false If true the component will notify on some events. This can be a lot of event so use with caution. false
notifyOnPointerDown function not set Pass your own function that takes x, y as arguments. Will be called when mouse or touch is pressed. -
notifyOnPointerUp function not set Pass your own function that takes x, y as arguments . Will be called when mouse or touch is released. -
notifyOnPointerMoved function not set Pass your own function that takes x, y as arguments . Will be called any time the mouse or touch is moved if being pressed down.

Roadmap

  • Add rotate icon
  • Start image index
  • Set autoplay to look x number of times
  • Release for NPM
  • Document API
  • Allow for external URI:s as imagesources
  • Example on how to layout images
  • Add inertia
  • Supply events
    • Autoplay finished
    • Image changed
    • User key Down
    • User key release
    • User movement

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

GitHub

https://github.com/Todilo/react-360-product-viewer
You might also like...

React lightbox component

React lightbox component

React Image Lightbox A flexible lightbox component for displaying images in a React project. DEMO Features Keyboard shortcuts (with rate limiting) Ima

May 6, 2022

A React component for viewing large images up close 🔍

react-intense This component is a port of Intense Image Viewer for use with React. Demo. Usage Simply replace your img element with a ReactIntense

Apr 9, 2022

React Photo Gallery

React Photo Gallery

React Photo Gallery Responsive, accessible, composable, and customizable image gallery component Maintains the original aspect ratio of your photos Cr

May 17, 2022

:eyes: A React component that adds pan and zoom features to SVG

react-svg-pan-zoom react-svg-pan-zoom is a React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a

May 9, 2022

React component to display imgix images

React component to display imgix images

react-imgix provides custom components for integrating imgix into React sites and generating images server-side. Overview / Resources Installation Usa

May 13, 2022

React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

React Upload Gallery A simple library that lets you create an image gallery, change the order of images, select the highlighted image, and customize i

Feb 27, 2022

A component to reveal images on user interaction, written with TypeScript + React.

A component to reveal images on user interaction, written with TypeScript + React.

A component to reveal images on user interaction, written with TypeScript + React.

May 14, 2022

react library for generating avatar

react library for generating avatar

react library for generating avatar

May 12, 2022

Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

holiday-avatar Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

Apr 15, 2022
Comments
  • 1. OnMouseUp does not seem to always work outside the component window.

    You should be able to release mousedown when outside component window, this works in storybook but found it does not work when consuming it outside the storybook environment.

    Reviewed by Todilo at 2022-03-28 06:36
  • 2. Style-components not set in peerDependencies

    It seems like style-components need to be set as peerDependencies or there might be a version conflict. (Not tested using the npm package yet, only npm package reference directly to github)

    Reviewed by Todilo at 2022-03-28 06:35
A react component that renders image tag only if the image source is found without error.

Img-or-alt This react component that will render image tag only if the image source is found without error, otherwise it renders only the alt text in

Dec 14, 2021
Core medical image viewer components built using React

Core medical image viewer components built using React

Mar 25, 2022
This React Capstone project is a browsable catalogue of pets using React and Redux that enables users to filter and access details of a specific item.
This React Capstone project is a browsable catalogue of pets using React and Redux that enables users to filter and access details of a specific item.

This React Capstone project is a browsable catalogue of pets using React and Redux that enables users to filter and access details of a specific item.

Nov 16, 2021
An photo website built with React, users can search for a variety of high quality photos
An photo website built with React, users can search for a variety of high quality photos

Photo_Website Description An photo website built with React, users can search for a variety of high quality photos. features: React for displaying UI

Mar 25, 2022
React hooks for generating Barcode for your next React apps.
React hooks for generating Barcode for your next React apps.

react-barcodes React hooks for generating Barcodes. Live demo ?? Features Compatible with both JavaScript and TypeScript Generate as SVG, Canvas and I

May 13, 2022
Find and record your favourite photo spots. Built using React using Google API.
Find and record your favourite photo spots. Built using React using Google API.

Photo Locations Photo Locations is a personal project. When travelling with family or friends, you often don't have enough time to extensively researc

Mar 8, 2022
Beautifully crafted unique avatar placeholder for your next react project
Beautifully crafted unique avatar placeholder for your next react project

Avvvatars Beautifully crafted unique avatar placeholder for your next react project Lightweight and customizable ❤️ demo.mp4 Live Demo ?? | Website ??

May 12, 2022
🧞‍♂️ Aladino – your magic WebGL carpet
 🧞‍♂️ Aladino – your magic WebGL carpet

Aladino is a tiny (around ~5kb gzipped) and dependency-free javascript library that allows to enhance your site using "shader effects".

May 7, 2022
React component to compare two images with a slider
React component to compare two images with a slider

React Compare Image Simple React component to compare two images using slider. NOTE: Vue.js Version is also available! Demo & Sample codes Demo & Samp

Apr 24, 2022
React carousel image gallery component with thumbnail support 🖼
React carousel image gallery component with thumbnail support  🖼

React Carousel Image Gallery Live Demo (try it on mobile for swipe support) linxtion.com/demo/react-image-gallery React image gallery is a React compo

May 12, 2022