Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@best-apps/gfx-editor
Advanced tools
Use Best Apps' GFX Editor as a React component or in vanilla JS
npm install @best-apps/gfx-editor
yarn add @best-apps/gfx-editor
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
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()
.
Use <GFXInstance {...props} />
wherever you want to render the Editor in an iframe.
div
with width
, height
, and position
styles so that the editor can fill this container element.gfx
within a GFXInstanceProvider component.gfxRef
. It will get initialized with a gfx
instance object.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>
)
}
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>
)
}
}
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))
It may be necessary to use our hosted script in some instances
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)activeObject
design
initialData
This is a private repo. If you are part of the Best Apps team, see CONTRIBUTING.md
FAQs
GFX editor
The npm package @best-apps/gfx-editor receives a total of 18 weekly downloads. As such, @best-apps/gfx-editor popularity was classified as not popular.
We found that @best-apps/gfx-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.