# How to define sticker presets
Stickers can be used in the [Annotate](../../plugins/annotate/), [Decorate](../../plugins/decorate/), and the [Sticker](../../plugins/sticker/) plugins.
## Creating stickers
We can set up stickers with 3 different methods.
* [Emoji](#emoji)
* [Image URL](#image-url)
* [Configuration object](#configuration-object)
* [Programmatically](#programmatically-adding-a-sticker)
### Emoji
This is the easiest way we can define a sticker.
The size of the emoji will automatically be set to `'10%'` width of the parent context (image size or crop rectangle) and the `aspectRatio` of the Emoji is automatically set so the sticker can't be skewed.
* [ JavaScript](#javascript-panel-0)
* [ React](#react-panel-0)
* [ Vue](#vue-panel-0)
* [ Svelte](#svelte-panel-0)
* [ Angular](#angular-panel-0)
* [ jQuery](#jquery-panel-0)
* [index.html](#index-html-panel-0)
`
`
* [App.jsx](#App-jsx-panel-0)
* [App.css](#App-css-panel-0)
`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
`
* [app.component.ts](#app-component-ts-panel-2)
* [app.component.html](#app-component-html-panel-2)
* [app.component.css](#app-component-css-panel-2)
* [app.module.ts](#app-module-ts-panel-2)
`import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
stickers: any = [
{
src: './stickers/one.svg',
width: 100,
height: 100,
alt: 'Number one',
},
/* more stickers here */
];
}
`
`
`
```css
::ng-deep .pintura-editor {
height: 600px;
}
```
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
* [index.html](#index-html-panel-2)
`
`
The sticker configuration object supports the following properties.
| Property | Description |
| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| src | Either an [image URL](#image-url) or an [Emoji](#emoji). Used for the sticker thumbnail if thumb is not supplied. If shape is not supplied will automatically use as backgroundImage of shape. |
| thumb | The image to use for the sticker thumbnail. If not supplied will use src. Can be an [image URL](#image-url), an [Emoji](#emoji), or an SVG. |
| width | The width of the sticker in pixels or percentage. |
| height | The height of the sticker in pixels or percentage. |
| alt | The alt text to use on the sticker thumbnail. If not supplied will automatically derive an alt text from the src or thumb value. |
| disabled | When set to true the sticker cannot be used. |
| shape | The shape to use when adding the sticker. |
| [mount](#altering-the-sticker-thumbnail) | Set to a function, this will allow updating the HTML of the sticker thumbnail. |
#### Altering the sticker thumbnail
The `mount` property enables us to update the HTML of the sticker thumbnail. It receives the sticker thumbnail element and the sticker configuration object.
* [ JavaScript](#javascript-panel-3)
* [ React](#react-panel-3)
* [ Vue](#vue-panel-3)
* [ Svelte](#svelte-panel-3)
* [ Angular](#angular-panel-3)
* [ jQuery](#jquery-panel-3)
* [index.html](#index-html-panel-3)
``
``
* [App.jsx](#App-jsx-panel-3)
* [App.css](#App-css-panel-3)
`` import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
{
// runs when the sticker thumbnail `element' is added
return {
update: (sticker) => {
// runs when the `sticker` parameter is updated
},
destroy: () => {
// runs when the sticker thumbnail `element` is removed
},
};
},
},
/* more stickers here */
]}
/>
{
// runs when the sticker thumbnail `element' is added
return {
update: (sticker) => {
// runs when the `sticker` parameter is updated
},
destroy: () => {
// runs when the sticker thumbnail `element` is removed
},
};
},
},
/* more stickers here */
]}
/>
``
* [app.component.ts](#app-component-ts-panel-3)
* [app.component.html](#app-component-html-panel-3)
* [app.component.css](#app-component-css-panel-3)
* [app.module.ts](#app-module-ts-panel-3)
`` import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
stickers: any = [
{
src: './stickers/one.svg',
width: 100,
height: 100,
alt: 'Number one',
mount: (element, sticker) => {
// runs when the sticker thumbnail `element' is added
return {
update: (sticker) => {
// runs when the `sticker` parameter is updated
},
destroy: () => {
// runs when the sticker thumbnail `element` is removed
},
};
},
},
/* more stickers here */
];
}
``
`
`
```css
::ng-deep .pintura-editor {
height: 600px;
}
```
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
* [index.html](#index-html-panel-3)
``
``
Instead of having the editor handle generating the sticker shape we can define the sticker shape ourselves by setting the `shape` property.
* [ JavaScript](#javascript-panel-4)
* [ React](#react-panel-4)
* [ Vue](#vue-panel-4)
* [ Svelte](#svelte-panel-4)
* [ Angular](#angular-panel-4)
* [ jQuery](#jquery-panel-4)
* [index.html](#index-html-panel-4)
``
``
* [App.jsx](#App-jsx-panel-4)
* [App.css](#App-css-panel-4)
`` import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults, Sticker } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
``
* [app.component.ts](#app-component-ts-panel-4)
* [app.component.html](#app-component-html-panel-4)
* [app.component.css](#app-component-css-panel-4)
* [app.module.ts](#app-module-ts-panel-4)
`` import { Component } from '@angular/core';
import { getEditorDefaults, Sticker } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
stickers: any = [
// Advanced Sticker configuration
// - `thumb` is used as the thumbnail for the sticker list
// - `backgroundImage` is used for the sticker
// - The editor will use the shape `width`, `height`, and `aspectRatio`
{
thumb: './stickers/logo.png', // can also be an Emoji
alt: 'Firefox logo',
shape: {
// a shape definition, the position of the sthape will be set by the editor
width: 100,
height: 100,
aspectRatio: 1,
backgroundImage: './stickers/logo-high-resolution.png',
},
},
];
}
``
`
`
```css
::ng-deep .pintura-editor {
height: 600px;
}
```
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
* [index.html](#index-html-panel-4)
``
``
### Programmatically adding a sticker
Stickers are rectangles with a `backgroundImage`. To programmatically add one we can update the `imageAnnotation` or `imageDecoration` properties.
This sets a sticker to the annotation array.
* [ JavaScript](#javascript-panel-5)
* [ React](#react-panel-5)
* [ Vue](#vue-panel-5)
* [ Svelte](#svelte-panel-5)
* [ Angular](#angular-panel-5)
* [ jQuery](#jquery-panel-5)
* [index.html](#index-html-panel-5)
`
`
* [App.jsx](#App-jsx-panel-5)
* [App.css](#App-css-panel-5)
`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (