@dybo-io/dybo-sixty-1 v0.0.27

dybo-sixty

Install

npm i @dybo-io/dybo-sixty-1

Usage

Simple

Here is the simplest case of using dybo-sixty. You just need to specify the skuID, a valid dybo API Key and current Features to be loaded

Sample code:

import React from "react";
import { DyboSixty } from "@dybo-io/dybo-sixty-1";

const Example = () => (
  <div className={styles.dyboSixty}>
    <DyboSixty
      dyboAPIKey={apiKey}
      skuID={skuID}
      ref={dyboSixtyRef}
      inverse
      mousewheel
      hintOnStartup={true}
      jumpDelay={10}
      touchDragInterval={1}
      currentFeatures={features}
      zoomFactor={4}
      onSKUDataLoaded={(skuData) => // console.log(skuData)}
      OnThumbnailLoaded={(url) => {
        // console.log(url);
      }}
    />
  </div>
);

SKU data object returned from DyboSixty onSKUDataLoaded prop event has following structure:

{
  sku_id: "dybo sku_id",
  name: "client unique sku id",
  friendly_name: "Friendly name to displayed in UI",
  category: "SKU Category",
  features: [
    {
      name: "FEATURE_NAME",
      friendly_name: "Friendly name to displayed in UI",
      options: [
        {
          category: "option category",
          values: [
            {
              unique_name: "option code to be sent to dybo-server",
              friendly_name: "Friendly name to displayed in UI",
              thumbnail: "image url for thumbnail",
            },
            //...similar objects
          ],
        },
        //...similar objects
      ],
    },
    //...similar objects
  ],
  client_name: "Client name",
};

Props

Prop Events

Ref Functions

License

© dybo-io