Emoji Picker in SPFx

This article explains how to add an Emoji Picker inside a SharePoint Framework (SPFx) web part using the Emoji Mart React component.
It also demonstrates how to save the selected emoji to a SharePoint list using PnP JS.

⚙️ Install Dependencies

Install Emoji Mart and PnP JS libraries:

npm install emoji-mart --save
npm install @pnp/sp --save

🧩 Configure PnP Context

In your main component file (e.g. SpfxEmojipickerWebPart.ts), add:

sp.setup({ spfxContext: this.props.context });

🧠 Create State and Interface

In ISpfxEmojipickerState.ts, define the state interface:

export interface ISpfxEmojipickerState {
  selectedEmoji: string;
  showPicker: boolean;
}

🪄 Implement the React Component

Below is the complete React component for the Emoji Picker:

import * as React from 'react';
import styles from './SpfxEmojipicker.module.scss';
import { ISpfxEmojipickerProps } from './ISpfxEmojipickerProps';
import { ISpfxEmojipickerState } from './ISpfxEmojipickerState';
import { Picker } from 'emoji-mart';
import 'emoji-mart/css/emoji-mart.css';
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

export default class SpfxEmojipicker extends React.Component<ISpfxEmojipickerProps, ISpfxEmojipickerState> {
  constructor(props: ISpfxEmojipickerProps) {
    super(props);
    this.state = { selectedEmoji: '😀', showPicker: false };
  }

  private async _saveEmojiToSP() {
    let list = sp.web.lists.getByTitle("Emoji");
    const item = await list.items.getById(1).update({
      Title: this.state.selectedEmoji
    });
  }

  public render(): React.ReactElement<ISpfxEmojipickerProps> {
    return (
      <div className={styles.spfxEmojipicker}>
        <h3>Select an Emoji</h3>
        <div style={{ fontSize: '40px', cursor: 'pointer' }} onClick={() => this.setState({ showPicker: !this.state.showPicker })}>
          {this.state.selectedEmoji}
        </div>
        {this.state.showPicker && (
          <Picker
            style={{ position: 'absolute', zIndex: 10 }}
            onSelect={(emoji) => {
              this.setState({ selectedEmoji: emoji.native, showPicker: false });
              this._saveEmojiToSP();
            }}
          />
        )}
      </div>
    );
  }
}

🗂 Create SharePoint List

Create a SharePoint list named Emoji with the following column:

Title (Single line of text)

This list will store the selected emoji value.

🚀 Build and Deploy the Solution

Run the following commands to build and deploy your solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file from the sharepoint/solution folder to your App Catalog, deploy it, and add the web part to a modern SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Emoji Picker in SPFx

GitHub

✅ Summary

This SPFx web part demonstrates how to use the Emoji Mart library to implement an emoji picker inside SharePoint pages.
It’s a fun and simple enhancement that improves user interaction while integrating seamlessly with SharePoint data storage via PnP JS.