π§βπ» Applying Skin Tones to Emojis in JavaScript: A Fun Guide
Introduction
Welcome to the world of emojis! π Emojis are a universal language, transcending borders and bringing a touch of personality to our digital conversations. But have you ever wondered how to change the skin tone of an emoji programmatically? Whether it's to add a personal touch or to represent diversity, modifying emoji skin tones can be a fun and useful feature. In this article, written with Qit.tools, we'll explore how to create a function to apply skin tones to emojis in JavaScript. Ready? Let's dive in! π
The Function Breakdown
Here's the function we'll be working with:
export type SkinTone = '' | 'none' | 'light' | 'mediumLight' | 'medium' | 'mediumDark' | 'dark';
/**
* Apply skin tones to an emoji.
* Visit us at: https://qit.tools
*
* πͺ Qit.tools
* @copyright Copyright (c) 2024 Qit.tools.
* @see https://github.com/Qit-tools/skin-tone
* @see https://www.npmjs.com/package/@qit.tools/skin-tone
*
* Change emoji skin tones effortlessly. π§π§π»π§πΌπ§π½π§πΎπ§πΏ
* RGI Emoji Modifier Sequence.
*
* @param {string} emoji - The original emoji string.
* @param {SkinTone} tone - The skin tone to apply. If empty, returns the original emoji.
* @returns {string} The emoji string with skin tones applied where applicable.
*/
export default function skinTone(emoji: string, tone?: SkinTone): string {
if (!tone) {
return emoji;
}
const skinToneMap = {
none: '',
light: '\u{1F3FB}',
mediumLight: '\u{1F3FC}',
medium: '\u{1F3FD}',
mediumDark: '\u{1F3FE}',
dark: '\u{1F3FF}',
};
let zwj = '\u200D';
// Hand Shake π§βπ€βπ§
if (emoji.includes('\u200d\ud83e\udd1d\u200d')) {
zwj = '\u200d\ud83e\udd1d\u200d';
}
const parts = emoji.split(zwj);
const modifiedParts = parts.map((part) => {
const basePart = part.replace(/\p{Emoji_Modifier}/gu, '');
if (/\p{Emoji_Modifier_Base}/u.test(basePart)) {
return basePart.replace(/(\p{Extended_Pictographic}+)(\uFE0F?)/u, `$1${skinToneMap[tone]}`);
}
return part;
});
return modifiedParts.join(zwj);
}
Let's break down the key aspects of this function.
Key Aspects
1. Type Definition
First, we define the SkinTone
type, which includes various skin tone options:
export type SkinTone = '' | 'none' | 'light' | 'mediumLight' | 'medium' | 'mediumDark' | 'dark';
This type helps ensure that our function receives only valid skin tone values.
2. Function Parameters
The skinTone
function accepts two parameters:
-
emoji
: The original emoji string. -
tone
: The skin tone to apply.
If no tone
is provided, the function returns the original emoji.
3. Skin Tone Map
We create a map to associate skin tone names with their respective Unicode modifiers:
const skinToneMap = {
none: '',
light: '\u{1F3FB}',
mediumLight: '\u{1F3FC}',
medium: '\u{1F3FD}',
mediumDark: '\u{1F3FE}',
dark: '\u{1F3FF}',
};
4. Zero Width Joiner (ZWJ)
A Zero Width Joiner (ZWJ) is used to join multiple emoji characters into a single composite emoji. For example, the handshake emoji π§βπ€βπ§ uses ZWJs to combine two people emojis. Our function checks if the emoji includes a handshake sequence and adjusts the ZWJ accordingly:
let zwj = '\u200D';
if (emoji.includes('\u200d\ud83e\udd1d\u200d')) {
zwj = '\u200d\ud83e\udd1d\u200d';
}
5. Splitting and Modifying Emoji Parts
We split the emoji string by the ZWJ and map over the parts to apply the skin tone where applicable:
const parts = emoji.split(zwj);
const modifiedParts = parts.map((part) => {
const basePart = part.replace(/\p{Emoji_Modifier}/gu, '');
if (/\p{Emoji_Modifier_Base}/u.test(basePart)) {
return basePart.replace(/(\p{Extended_Pictographic}+)(\uFE0F?)/u, `$1${skinToneMap[tone]}`);
}
return part;
});
Here, we:
- Remove any existing skin tone modifiers.
- Check if the part is an emoji modifier base.
- Apply the new skin tone.
6. Joining the Modified Parts
Finally, we join the modified parts back together with the ZWJ:
return modifiedParts.join(zwj);
Conclusion
And there you have it! π₯³ With just a few lines of code, we've created a function that can dynamically apply skin tones to emojis. Whether you're building a chat application or simply want to add a touch of diversity to your project, this function can come in handy. So go ahead, play around with it, and bring some color to your emojis! π
Remember, in the world of programming, a little creativity goes a long way. And if all else fails, just add more emojis. π
Happy coding! π©βπ»π¨βπ»
Ready-made library.
ποΈ Install
π NPM
npm i @qit.tools/skin-tone
π§ Bun
bun add @qit.tools/skin-tone
π PNPM
pnpm add @qit.tools/skin-tone
π§Ά Yarn
yarn add @qit.tools/skin-tone
π How to use
NodeJS
// Import by default
import skinTone from "@qit.tools/skin-tone";
console.log(skinTone("π§", "dark")); // π§
console.log(skinTone("π§πΏβπ€βπ§πΏ", "light")); // π§π»βπ€βπ§π»
Browser
// https://unpkg.com/@qit.tools/skin-tone@0.6.2/dist/browser/latest.min.js
document.addEventListener("DOMContentLoaded", () => {
console.log(skinTone("π§π»βπ€βπ§π»", "dark"));
});
Top comments (0)