Welcome to DlivrIO

Dependenices :

• We use fabricJs for an awesome canvas interactive drawing experience
• We use PopperJs for perfect positioning
• We use styled-components for styling

:warning: FabricJS' interactivity module needs to be bundled first. Thus, interactivity won't work in some development environments!!!

Installation

    yarn add @dlivr.io/product-configurator

    # or

    npm install --save @dlivr.io/product-configurator

Usage

import ProductConfigurator from "@dlivr.io/product-configurator";

<ProductConfigurator images={images} configuratorOptions={options} />;

Props

images :

interface Image {
  src: string; //Image URL
  width?: string; //auto
  height?: string; //auto
  /* By default boundary is a centered box */
  boundary?: {
    top?: string;
    left?: string;
    width?: number | string;
    height?: number | string;
  };
}

configuratorOptions :

interface ConfiguratorOptions {
  /* Main Canvas */
  canvas?: {
    backgroundColor?: string;
  };
  pickers?: {
    /* Image Picker */
    media?: {
      width?: string;
      height?: string;
      backgroundColor?: string;
      backgroundColorOnHover?: string;
      Icon?: ReactNode;
      label?: string;
      /* Popover */
      inputLabel?: string;
      inputPlaceholder?: string;
      buttonStyles?: {
        backgroundColor?: string;
        backgroundColorOnHover?: string;
        color?: string;
      };
      buttonText?: string;
    };
    /* Text Picker */
    text?: {
      width?: string;
      height?: string;
      backgroundColor?: string;
      backgroundColorOnHover?: string;
      Icon?: ReactNode;
      label?: string;
      /* Popover */
      inputPlaceholder?: string;
      inputStyles?: {
        focusColor?: string;
      };
      buttonStyles?: {
        backgroundColor?: string;
        backgroundColorOnHover?: string;
        color?: string;
      };
      buttonText?: string;
      fonts?: { label: string; name: string }[];
    };
  };
  /* Events */
  onInit?: (src: string, canvas: fabric.Canvas) => void;
  onAssetsChange?: (assets: { type: "text" | "media", ...attrs }) => void;
}

onImageChange :

interface OnImageChange {
  (newImage: Image): void;
}

Lisence

MIT