@best-apps/gfx-editor

Best Apps GFX Editor

Use Best Apps' GFX Editor as a React component or in vanilla JS

Table of contents

• Installation
• Usage in React
• Use as es6 module
• Use as script and window.embedGFX
• Using GFX instance

Installation

npm install @best-apps/gfx-editor

yarn add @best-apps/gfx-editor

Usage in React

• GFXInstanceProvider
• GFXInstance
• useGFXInstanceProvider
• useActiveObjectType

TLDR

import {
  GFXInstanceProvider,
  GFXInstance
} from '@best-apps/gfx-editor'

function App() {

  return (
    <GFXInstanceProvider>
      <div
        style={{
          width: 400,
          height: 600,
          margin: 20,
          border: '1px solid black',
          position: 'relative' // You have to wrap the editor in an element with width/height and position: fixed/relative/absolute
        }}
      >
        <GFXInstance
          v1TemplateId={123} // The v1TemplateId for you product and design
        />
      </div>
    </GFXInstanceProvider>
  )
}

That will render the editor in an iframe and give you the full interface for interacting with your design/template/product

GFXInstanceProvider

Wherever you want to put the Editor you have to put it inside <GFXInstanceProvider />. This creates a React context so that every component nested within it has access to gfx with useGFXInstance().

GFXInstance

Use <GFXInstance {...props} /> wherever you want to render the Editor in an iframe.

• First create a div with width, height, and position styles so that the editor can fill this container element.
• Wrap this and whatever other components need access to gfx within a GFXInstanceProvider component.
• Provide a react ref as gfxRef. It will get initialized with a gfx instance object.

useGFXInstance()

This hook will get gfx from context. Here is an example:

import { useGFXInstance } from '@best-app/gfx-editor';

function Button() {
  const gfx = useGFXInstance()
  return (
    <button onClick={() => gfx?.actions.flipCanvas()}>
      Flip canvas
    </button>
  )
}

useActiveObjectType()

NOTE: This is only useful if you are creating your own UI for the Editor.

When creating your own toolbars and buttons, you will often need to know exactly what TYPE OF object has been actively selected. This is where useActiveObjectType is useful.

This hook will return:

• CustomImage
• LikeCustomTextbox
• Sticker
• CustomizableTextSlot
• CustomizableImageSlot
• null

Here is an example:

function TopToolbar() {
  const activeObjectType = useActiveObjectType(gfx?.state);

  if (activeObjectType === 'LikeCustomTextbox') {
    return (
      <button
        onClick={() => gfx?.actions.openMenu({
          menuType: 'strokeColorOnTextbox',
        })}
      >
        Open stroke color drawer
      </button>
    )
  }
}

Use as es6 module

Sort of like ReactDOM.render, you call this with a config object and an html element where we should insert the Editor.

import { embedGFX } from '@best-apps/gfx-editor';

embedGFX({
  v1TemplateId: 1234
}, document.getElementById(#editor - container))

Use as script and window.embedGFX

It may be necessary to use our hosted script in some instances

• Use in a Shopify Store

Using GFX Instance

gfx.actions

• flipCanvas(): This flips the canvas (if there is a front and back to the design and product). Wall art, for example, will not flip.
• rotateCanvas(): This will rotate the canvas (only when using wall art or poster printables)

gfx.state

• activeObject
• design
• initialData

FAQ

Contributing

This is a private repo. If you are part of the Best Apps team, see CONTRIBUTING.md