Skip to content

React Tridi is a react component for 360-degree product viewer

Notifications You must be signed in to change notification settings

nevestuan/react-tridi

Repository files navigation

react-tridi

React Tridi is a light-weight react component for 360-degree product viewer

NPM JavaScript Style Guide

Inspired by the Tridi javascript library for 360-degree 3D product visualizations based on series of images. Special thanks to Łukasz Wójcik

Install

npm install --save react-tridi

Usage

Simple

Here is the simplest case of using React Tridi. You just need to specify an images' location, its format, and total of the images.

Sample code:

import React from 'react';
import Tridi from 'react-tridi';
import 'react-tridi/dist/index.css';

const Example = () => (
    <div style={{ width: '500px' }}>
        <Tridi location="./images" format="jpg" count="36" />
    </div>
);

With Pins

In this mode, you can load some pin points on top of the product images. There is an onClick event on each pin with the pin's information returned, so you can show the product information on that event if needed.

The pins data structure looks like this:

const pins = [
  { "id": "kcyvybbrjkr8lz7w1j", "frameId": 0, "x": "0.664000", "y": "0.570922", "recordingSessionId": "klbp4jr3r7vyy5nnmkg" },
  { "id": "kcyvybrdbqwmi3z1ig", "frameId": 1, "x": "0.340000", "y": "0.500000", "recordingSessionId": "klbp4jr3r7vyy5nnmkg" },
]

You can record pins' coordinates via the recoding mode of the React Tridi with the following steps:

  1. Enable the prop showControlBar to show functionality buttons.
  2. Click the target icon to start recoding the coordinates.
  3. Click on the image view area to create a pin. Double click the pin to remove it. You can click the Next & Prev button to move to other frames, and create other pins on them.
  4. On each start and stop recording event, an array of pins' information like above will be returned.

You can also render a custom pin point if needed by using the renderPin prop.

Sample code:

import React from 'react';
import Tridi from 'react-tridi';
import 'react-tridi/dist/index.css';

const Example = () => (
    <div style={{ width: '500px' }}>
      <Tridi
        location="./images"
        format="jpg"
        count="36"
        autoplaySpeed={70}
        onRecordStart={recordStartHandler}
        onRecordStop={recordStopHandler}
        onPinClick={pinClickHandler}
        renderPin={(pin) => (<span>A</span>)}
        inverse
        showControlBar
      />
    </div>
);

With Customized Control Buttons

If you do not like the default control buttons, React Tridi gives you a ref accessing to all the button actions.

Sample code:

import React, { useState, useRef } from 'react';
import Tridi from 'react-tridi';
import 'react-tridi/dist/index.css';

const Example = () => {
    const [isAutoPlayRunning, setIsAutoPlayRunning] = useState(false);
  const tridiRef = useRef(null);
  
  return (
    <div style={{ width: '500px' }}>
      <Tridi
        ref={tridiRef}
        location="./images"
        format="jpg"
        count="36"
      />
      <button onClick={() => tridiRef.current.prev()}>Prev</button>
      <button onClick={() => tridiRef.current.next()}>Next</button>
      <button onClick={() => tridiRef.current.toggleAutoplay(!isAutoPlayRunning)}>
        {isAutoPlayRunning ? 'Pause' : 'Autoplay'}
      </button>
    </div>
  );
};

Props

Prop Name Prop Type Default Value Required? Description
className string undefined no Add class name for the component
style object undefined no Add style for the component
images arrays "numbered" no Source of images to be used by Tridi
pins arrays undefined no Pin coordinates to show on the product
format string undefined yes* Image extension (e.g. "jpg"). Required if images = "numbered"
location string undefined yes* Path to images folder. Required if images = "numbered"
count number undefined yes* Number of images in the series. Required if images = "numbered"
draggable boolean true no Enable/disable mouse drag event
hintOnStartup boolean false no Enable/disable hint on start up
hintText string undefined no Enable/disable hint text
autoplay boolean false no Enable/disable autoplay
autoplaySpeed number 50 no Adjust autoplay speed
stopAutoplayOnClick boolean false no Stop autoplay if user clicks on container
stopAutoplayOnMouseEnter boolean false no Stop autoplay if user hovers over container
resumeAutoplayOnMouseLeave boolean false no Resume autoplay if user moves mouse cursor away from container
touch boolean true no Enable/disable touch support
mousewheel boolean false no Enable/disable mousewheel support
inverse boolean false no Swap image rotation direction. Affects mouse drag, mousewheel and touch
dragInterval number 1 no Adjust rotation speed for mouse drag events
touchDragInterval number 2 no Adjust rotation speed for touch events
mouseleaveDetect boolean false no If true, active drag event will stop whenever mouse cursor leaves Tridi container
showControlBar boolean false no show a control bar with record, play, pause, next, prev functions
showStatusBar boolean false no show a status bar on recording
hideRecord boolean false no hide record button in the control bar
zoom number 1 no default zoom value
minZoom number 1 no minimum zoom value
maxZoom number 3 no maximum zoom value
renderPin func undefined no render a customized pin point
setPins func undefined no function to set pin's state
renderHint func undefined no render a customized hint message

Prop Events

Prop Name Params Type Description
onHintHide null Hint is hidden
onAutoplayStart null Autoplay is started
onAutoplayStop null Autoplay is stopped
onNextMove null Next image is loaded (obeying inverse option)
onPrevMove null Previous image is loaded (obeying inverse option)
onNextFrame null Next image is loaded following the order in the image source (indifferent to inverse option)
onPrevFrame null Previous image is loaded according to the order in the image source (indifferent to inverse option)
onDragStart null Image rotation sequence (dragging) starts
onDragEnd null Image rotation sequence (dragging) ends
onFrameChange number Next image is loaded, sending out the current image index
onRecordStart null get current sessionId on start recording
onRecordStop null get current sessionId on stop recording
onPinClick null get a pin info on click in normal mode
onZoom null get the current zoom scale value
onLoadChange load_success, percentage load_success: get whether all images have been loaded, percentage: current load percentage

Ref Functions

Function Name Params Type Description
prev() null trigger prev move
next() null trigger next move
toggleAutoPlay(true/false) boolean toogle autoplay
toggleRecording(true/false) boolean toggle recording pins' coordinates
toggleMoving(true/false) boolean toogle moving photo while zooming

License

MIT © nevestuan