stickerface-sdk
Made with create-react-library
Install
npm
npm install --save stickerface-sdkyarn
yarn add stickerface-sdk
yarn add stickerface-sdk@<version>Usage
StickerFaceEditor
import React, { useState } from 'react'
import { StickerFaceEditor, TransportContextProvider } from 'stickerface-sdk'
import 'stickerface-sdk/dist/index.css'
const App = () => {
const [layers, setLayers] = useState<string | null>();
return (
<div className={'container'}>
<TransportContextProvider>
<StickerFaceEditor
layers={layers}
size={{
width: '100%',
height: '100%',
}}
onInit={() => {
console.log('On init')
}}
showButtonSaveAvatar
onSave={(layers) => {
setLayers(layers)
}}
/>
</TransportContextProvider>
</div>
)
}
export default App
Params StickerFaceEditor
showButtonSaveAvatar?: boolean
layers: string | null
size: { width: string, height: string }
onInit: () => void
onInit={() => {
console.log('On init')
}}Use
onChangewhen showButtonSaveAvatar = false
onChange: (layers: string) => void
onChange={(layers) => {
// @ts-ignore
setLayers(layers?.data?.data)
}}Use
onSavewhen showButtonSaveAvatar = true
onSave?: (layers: string) => void
onSave={(layers) => {
setLayers(layers)
}}config: IConfig
interface IConfig {
excludedSections?: string
selectedSections?: string
}StickerFaceAvatar
Add 4 blocks to the top part inside the body
<body>
<div id="render-canvas-container"></div>
<div id="render-continer"></div>
<script type="text/javascript" src="https://stickerface.io/api/init-min.js"></script>
<script type="text/javascript" src="https://stickerface.io/js/render.js"></script>
...import React from 'react'
import { StickerFaceAvatar } from 'stickerface-sdk'
const App = () => {
const layers = '1;83;73;3412;100;6;219;214;203;7;11;28;68;13;320;2;273;159;160';
return (
<div className={'container'}>
<StickerFaceAvatar layers={layers} noBackground={false} />
</div>
)
}
export default AppParams StickerFaceAvatar
interface IAvatarProps {
layers: string
noBackground?: boolean
}License
MIT © Dimitreee | Thepetruha