# Adding An Emoji Picker
We can use the [willRenderShapePresetToolbar](../../api/markup-editor/properties/#willrendershapepresettoolbar) hook to add custom shape preset tools to the sticker and preset toolbars.
In the example below we use [emoji-picker-element](https://github.com/nolanlawson/emoji-picker-element) to add an Emoji picker to the preset tab of the annotation util. We can see an example of this control on [Edit • Photo](https://edit.photo/)
* [ 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)
```html
```
* [App.jsx](#App-jsx-panel-0)
* [App.css](#App-css-panel-0)
```jsx
import '@pqina/pintura/pintura.css';
import './App.css';
import { useRef, useState } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults, createNode, appendNode } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
const addSmiley = (editor, addPreset, smiley) => {
// update the recent smileys
const recent = new Set([smiley, ...editor.annotatePresets]);
const recentArr = Array.from(recent);
// max of five
if (recentArr.length > 5) recentArr.length = 5;
editor.annotatePresets = recentArr;
// add the smiley to the canvas
addPreset(smiley);
};
function App() {
const [picker, setPicker] = useState(undefined);
const [imported, setImported] = useState(false);
const editorRef = useRef(null);
const willRenderShapePresetToolbar = (toolbar, addPreset, env, redraw) => {
// import from unpkg
if (!imported) {
import('https://unpkg.com/emoji-picker-element')
.then(() => {
setImported(true);
redraw();
})
// silently error out
.catch(console.log);
return toolbar;
}
// create root
if (!picker) {
// create the picker
const emojiPicker = document.createElement('emoji-picker');
// enable touch scroll of Pintura child element on iOS
emojiPicker.dataset.touchScroll = 'true';
// exit if no shadow root
if (!emojiPicker.shadowRoot) return toolbar;
// set custom styles to make it fit better
const style = document.createElement('style');
style.textContent = `
.favorites { display: none }
.emoji { border-radius: 0 }
button.emoji { border-radius: 0 }
.tabpanel {
scrollbar-color:#ddd transparent;
scrollbar-width: thin;
}
.tabpanel::-webkit-scrollbar {
width: 1rem;
cursor: pointer;
}
.tabpanel::-webkit-scrollbar-track {
background: none;
}
.tabpanel::-webkit-scrollbar-thumb {
cursor: pointer;
background-clip: padding-box;
background-color: #ddd;
border-radius: 9999rem;
border: 0.3125rem solid rgba(0, 0, 0, 0);
}
`;
emojiPicker.shadowRoot.appendChild(style);
// set theme, light or dark
emojiPicker.className = 'light';
// handle picking an emoji
emojiPicker.addEventListener('emoji-click', (e) =>
addSmiley(editorRef.current.editor, addPreset, e.detail.unicode)
);
setPicker(emojiPicker);
}
// append the picker Panel
appendNode(
createNode('Panel', 'emoji', {
buttonLabel: 'Emoji',
root: picker,
}),
toolbar
);
return toolbar;
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-0)
```html
```
* [App.svelte](#App-svelte-panel-0)
```svelte
```
* [app.component.ts](#app-component-ts-panel-0)
* [app.component.html](#app-component-html-panel-0)
* [app.component.css](#app-component-css-panel-0)
* [app.module.ts](#app-module-ts-panel-0)
```javascript
import { Component, ViewChild } from '@angular/core';
import {
getEditorDefaults,
createNode,
appendNode,
PinturaNode,
Sticker,
} from '@pqina/pintura';
const addSmiley = (
editor: any,
addPreset: (preset: Sticker) => void,
smiley: string
): void => {
// update the recent smileys
const recent = new Set([smiley, ...editor.annotatePresets]);
const recentArr = Array.from(recent);
// max of five
if (recentArr.length > 5) recentArr.length = 5;
editor.annotatePresets = recentArr;
// add the smiley to the canvas
addPreset(smiley);
};
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@ViewChild('editor') editor?: any;
editorDefaults: any = getEditorDefaults();
picker: HTMLElement | undefined = undefined;
imported: Boolean = false;
willRenderShapePresetToolbar = (
toolbar: PinturaNode[],
addPreset: (preset: Sticker) => void,
env: any,
redraw: () => void
): PinturaNode[] => {
// import from unpkg
if (!this.imported) {
import('emoji-picker-element')
.then(() => {
this.imported = true;
redraw();
})
// silently error out
.catch(console.log);
return toolbar;
}
// create root
if (!this.picker) {
// create the picker
const emojiPicker = document.createElement('emoji-picker');
// enable touch scroll of Pintura child element on iOS
emojiPicker.dataset.touchScroll = 'true';
// exit if no shadow root
if (!emojiPicker.shadowRoot) return toolbar;
// set custom styles to make it fit better
const style = document.createElement('style');
style.textContent = `
.favorites { display: none }
.emoji { border-radius: 0 }
button.emoji { border-radius: 0 }
.tabpanel {
scrollbar-color:#ddd transparent;
scrollbar-width: thin;
}
.tabpanel::-webkit-scrollbar {
width: 1rem;
cursor: pointer;
}
.tabpanel::-webkit-scrollbar-track {
background: none;
}
.tabpanel::-webkit-scrollbar-thumb {
cursor: pointer;
background-clip: padding-box;
background-color: #ddd;
border-radius: 9999rem;
border: 0.3125rem solid rgba(0, 0, 0, 0);
}
`;
emojiPicker.shadowRoot.appendChild(style);
// set theme, light or dark
emojiPicker.className = 'light';
// handle picking an emoji
emojiPicker.addEventListener('emoji-click', (e) =>
addSmiley(this.editor.editor, addPreset, e.detail.unicode)
);
this.picker = emojiPicker;
}
// append the picker Panel
appendNode(
createNode('Panel', 'emoji', {
buttonLabel: 'Emoji',
root: this.picker,
}),
toolbar
);
return toolbar;
};
}
```
```html
```
```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-0)
```html
```