Have ideas to improve npm?Join in the discussion! »

    react-tridi

    2.1.0 • Public • Published

    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

    Install

    npm i react-tridi

    DownloadsWeekly Downloads

    520

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    238 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar