### Setting up EmojiMart Development Environment (sh)

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Installs project dependencies and starts the local development server for EmojiMart using the yarn package manager.

```sh
yarn install
yarn dev
```

--------------------------------

### Setting up EmojiMart Development Environment (Shell)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

These commands are used to initialize the EmojiMart project for development. 'yarn install' fetches all necessary dependencies, and 'yarn dev' starts the local development server.

```sh
yarn install
yarn dev
```

--------------------------------

### Using the Emoji-Mart Web Component

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Provides examples of how to use the `<em-emoji>` web component in HTML or JSX after the data has been initialized. Demonstrates setting emoji by ID or shortcode and applying skin tones or size.

```html
<em-emoji id="+1" size="2em"></em-emoji>
<em-emoji id="+1" skin="2"></em-emoji>
<em-emoji shortcodes=":+1::skin-tone-1:"></em-emoji>
<em-emoji shortcodes=":+1::skin-tone-2:"></em-emoji>
```

--------------------------------

### Install Data Package with Yarn (Shell)

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Explains how to install the `@emoji-mart/data` package using Yarn, which provides the necessary emoji data for the picker component.

```sh
yarn add @emoji-mart/data
```

--------------------------------

### Installing @emoji-mart/react with npm

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-react/README.md

Installs the necessary packages for using EmojiMart with React via npm, including the core library, data, and the React wrapper.

```Shell
npm install --save emoji-mart @emoji-mart/data @emoji-mart/react
```

--------------------------------

### Install React Packages with npm (Shell)

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Provides the command to install the necessary packages for using Emoji Mart within a React application, including the core library, data, and the React wrapper.

```sh
npm install --save emoji-mart @emoji-mart/data @emoji-mart/react
```

--------------------------------

### Installing React Dependencies via npm (Shell)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

Command to install the necessary packages (emoji-mart, @emoji-mart/data, @emoji-mart/react) for using the Emoji Mart picker within a React application using npm.

```sh
npm install --save emoji-mart @emoji-mart/data @emoji-mart/react
```

--------------------------------

### Installing Data Dependency via Yarn (Shell)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

Command to add the @emoji-mart/data package to your project using Yarn, providing the necessary emoji data for the picker component.

```sh
yarn add @emoji-mart/data
```

--------------------------------

### Performing Headless Search with Emoji-Mart

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Illustrates how to use the `SearchIndex` class for searching emojis programmatically without the Picker UI. Requires data initialization first. The example searches for 'christmas' related emojis and logs their native characters.

```javascript
import data from '@emoji-mart/data'
import { init, SearchIndex } from 'emoji-mart'

init({ data })

async function search(value) {
  const emojis = await SearchIndex.search(value)
  const results = emojis.map((emoji) => {
    return emoji.skins[0].native
  })

  console.log(results)
}

search('christmas') // => ['🎄', '🇨🇽', '🧑‍🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄']
```

--------------------------------

### Performing Headless Emoji Search (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

This example illustrates how to perform a search for emojis programmatically without displaying the full picker UI. It requires the emoji data to be initialized first using `init`. The `SearchIndex.search` method returns an array of matching emoji objects.

```javascript
import data from '@emoji-mart/data'
import { init, SearchIndex } from 'emoji-mart'

init({ data })

async function search(value) {
  const emojis = await SearchIndex.search(value)
  const results = emojis.map((emoji) => {
    return emoji.skins[0].native
  })

  console.log(results)
}

search('christmas') // => ['🎄', '🇨🇽', '🧑‍🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄']
```

--------------------------------

### Getting Emoji Data from Native Character

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Shows how to use the `getEmojiDataFromNative` function to retrieve detailed emoji data (like ID, aliases, keywords, skin tone) given a native emoji character string. Data must be initialized beforehand.

```javascript
import data from '@emoji-mart/data'
import { init, getEmojiDataFromNative } from 'emoji-mart'

init({ data })

getEmojiDataFromNative('🤞🏿').then(console.log)
/* {
  aliases: ['hand_with_index_and_middle_fingers_crossed'],
  id: 'crossed_fingers',
  keywords: ['hand', 'with', 'index', 'and', 'middle', 'good', 'lucky'],
  name: 'Crossed Fingers',
  native: '🤞🏿',
  shortcodes: ':crossed_fingers::skin-tone-6:',
  skin: 6,
  unified: '1f91e-1f3ff',
} */
```

--------------------------------

### Getting Emoji Data from Native Character (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

This snippet demonstrates how to retrieve detailed data for an emoji given its native character representation. This is useful for obtaining information like the emoji's ID, keywords, name, and skin tone. Data must be initialized before calling `getEmojiDataFromNative`.

```javascript
import data from '@emoji-mart/data'
import { init, getEmojiDataFromNative } from 'emoji-mart'

init({ data })

getEmojiDataFromNative('🤞🏿').then(console.log)
/* {
  aliases: ['hand_with_index_and_middle_fingers_crossed'],
  id: 'crossed_fingers',
  keywords: ['hand', 'with', 'index', 'and', 'middle', 'good', 'lucky'],
  name: 'Crossed Fingers',
  native: '🤞🏿',
  shortcodes: ':crossed_fingers::skin-tone-6:',
  skin: 6,
  unified: '1f91e-1f3ff',
} */
```

--------------------------------

### Initialize Picker with Fetched Data (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Shows how to initialize the `Picker` with data fetched asynchronously from a remote URL using the `fetch` API, providing flexibility for data loading.

```js
import { Picker } from 'emoji-mart'
new Picker({
  data: async () => {
    const response = await fetch(
      'https://cdn.jsdelivr.net/npm/@emoji-mart/data',
    )

    return response.json()
  }
})
```

--------------------------------

### Initialize Picker with Bundled Data (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Demonstrates how to import the bundled emoji data and the `Picker` class, then initialize a new picker instance by passing the imported data directly.

```js
import data from '@emoji-mart/data'
import { Picker } from 'emoji-mart'

new Picker({ data })
```

--------------------------------

### Initializing Emoji-Mart Data

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Shows the necessary imports and function call to initialize the emoji data. This step is required once per page load before using emoji components or search index.

```javascript
import data from '@emoji-mart/data'
import { init } from 'emoji-mart'

init({ data })
```

--------------------------------

### Initializing Emoji Mart Picker with Bundled Data (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

Imports the emoji data and the Picker component, then creates a new Picker instance, passing the imported data directly. This method bundles data with your application.

```js
import data from '@emoji-mart/data'
import { Picker } from 'emoji-mart'

new Picker({ data })
```

--------------------------------

### Initializing Emoji Data (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

This code demonstrates the essential step of initializing the emoji data for EmojiMart. This function should be called once per page load before using any components or search functionalities that rely on the data. Providing data here makes it globally available.

```javascript
import data from '@emoji-mart/data'
import { init } from 'emoji-mart'

init({ data })
```

--------------------------------

### Initialize Picker in Browser (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Provides the JavaScript code to initialize the Emoji Mart picker in a standard browser environment after the script has been loaded, setting options and appending it to the document body. This code is typically placed within `<script>` tags in an HTML file.

```js
const pickerOptions = { onEmojiSelect: console.log }
const picker = new EmojiMart.Picker(pickerOptions)

document.body.appendChild(picker)
```

--------------------------------

### Using the Emoji Web Component (HTML)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

This snippet shows various ways to use the `<em-emoji>` web component in HTML or JSX. It demonstrates setting the emoji using `id`, `shortcodes`, and controlling appearance with `size` and `skin` attributes.

```html
<em-emoji id="+1" size="2em"></em-emoji>
<em-emoji id="+1" skin="2"></em-emoji>
<em-emoji shortcodes=":+1::skin-tone-1:"></em-emoji>
<em-emoji shortcodes=":+1::skin-tone-2:"></em-emoji>
```

--------------------------------

### Initializing Emoji Mart Picker with Remote Data (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

Imports the Picker component and initializes it with an asynchronous function that fetches emoji data from a remote URL (like a CDN) when needed. This avoids bundling data with your app.

```js
import { Picker } from 'emoji-mart'
new Picker({
  data: async () => {
    const response = await fetch(
      'https://cdn.jsdelivr.net/npm/@emoji-mart/data'
    )

    return response.json()
  }
})
```

--------------------------------

### Configuring Internationalization for Emoji-Mart Picker

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Explains how to import and apply internationalization data for the Emoji-Mart Picker component. Demonstrates importing a French language file and optionally overriding specific strings.

```javascript
import i18n from '@emoji-mart/data/i18n/fr.json'
i18n.search_no_results_1 = 'Aucun emoji'

new Picker({ i18n })
```

--------------------------------

### Using Emoji Mart Picker in Browser (HTML/JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

Shows how to include the Emoji Mart library via a CDN script tag and then use inline JavaScript to create a Picker instance with options and append it to the document body for direct browser usage.

```html
<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script>
  const pickerOptions = { onEmojiSelect: console.log }
  const picker = new EmojiMart.Picker(pickerOptions)

  document.body.appendChild(picker)
</script>
```

--------------------------------

### Include Picker Script in Browser (HTML)

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Shows how to include the Emoji Mart library directly in an HTML page using a script tag from a CDN for browser-based usage.

```html
<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
```

--------------------------------

### Configuring Custom Category Icons in Emoji-Mart

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Demonstrates how to provide custom icons for emoji categories using an object where keys are category names and values are icon definitions. Supported formats include SVG strings and image source URLs.

```javascript
const customCategoryIcons = {
  categoryIcons: {
    activity: {
      svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M57.89 397.2c-6.262-8.616-16.02-13.19-25.92-13.19c-23.33 0-31.98 20.68-31.98 32.03c0 6.522 1.987 13.1 6.115 18.78l46.52 64C58.89 507.4 68.64 512 78.55 512c23.29 0 31.97-20.66 31.97-32.03c0-6.522-1.988-13.1-6.115-18.78L57.89 397.2zM496.1 352c-44.13 0-79.72 35.75-79.72 80s35.59 80 79.72 80s79.91-35.75 79.91-80S540.2 352 496.1 352zM640 99.38c0-13.61-4.133-27.34-12.72-39.2l-23.63-32.5c-13.44-18.5-33.77-27.68-54.12-27.68c-13.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2 192.8 220.4 230.9 183.4 273.4c-24.22 27.88-59.18 63.99-103.5 99.63l56.34 77.52c53.79-35.39 99.15-55.3 127.1-67.27c51.88-22 101.3-49.87 146.9-82.1l202.3-146.7C630.5 140.4 640 120 640 99.38z"/></svg>'
    },
    people: {
      src: './people.png'
    }
  }
}
```

--------------------------------

### Using @emoji-mart/react Picker Component

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-react/README.md

Demonstrates how to import the necessary data and the `Picker` component from `@emoji-mart/react` and render it within a React functional component, passing the data and a selection handler.

```JavaScript
import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

function App() {
  return (
    <Picker data={data} onEmojiSelect={console.log} />
  )
}
```

--------------------------------

### Use Picker Component in React (JSX)

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

Illustrates how to import the data and the React `Picker` component and use it within a functional React component, passing the data and an event handler for emoji selection.

```jsx
import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

function App() {
  return (
    <Picker data={data} onEmojiSelect={console.log} />
  )
}
```

--------------------------------

### Using Emoji Mart Picker in React Component (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

Demonstrates how to import the necessary data and the React Picker component, then render the component within a functional React component, passing the data and an event handler for emoji selection.

```js
import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

function App() {
  return (
    <Picker data={data} onEmojiSelect={console.log} />
  )
}
```

--------------------------------

### Customizing Internationalization Strings (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

This code shows how to load and customize internationalization strings for the EmojiMart UI. You can import a language file and modify its properties before passing it to the `Picker` constructor. English strings are built-in and do not need to be provided.

```javascript
import i18n from '@emoji-mart/data/i18n/fr.json'
i18n.search_no_results_1 = 'Aucun emoji'

new Picker({ i18n })
```

--------------------------------

### Integrating Custom Emojis with Emoji Mart React

Source: https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart/README.md

This snippet demonstrates how to define and pass custom emoji data to the `@emoji-mart/react` picker component. It shows how to structure custom categories and emojis, including support for multiple skin tones and GIF formats, and how to render the picker with default data and the custom emojis.

```JavaScript
import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

const custom = [
  {
    id: 'github',
    name: 'GitHub',
    emojis: [
      {
        id: 'octocat',
        name: 'Octocat',
        keywords: ['github'],
        skins: [{ src: './octocat.png' }],
      },
      {
        id: 'shipit',
        name: 'Squirrel',
        keywords: ['github'],
        skins: [
          { src: './shipit-1.png' }, { src: './shipit-2.png' }, { src: './shipit-3.png' },
          { src: './shipit-4.png' }, { src: './shipit-5.png' }, { src: './shipit-6.png' },
        ],
      },
    ],
  },
  {
    id: 'gifs',
    name: 'GIFs',
    emojis: [
      {
        id: 'party_parrot',
        name: 'Party Parrot',
        keywords: ['dance', 'dancing'],
        skins: [{ src: './party_parrot.gif' }],
      },
    ],
  },
]

function App() {
  return (
    <Picker data={data} custom={custom} />
  )
}
```

--------------------------------

### Defining Custom Emoji Category Icons (JavaScript)

Source: https://github.com/missive/emoji-mart/blob/main/README.md

This snippet shows how to provide custom icons for emoji categories. You can use either SVG strings or image source URLs. The custom icons are provided as an object where keys are category names and values are objects containing the icon data.

```javascript
const customCategoryIcons = {
  categoryIcons: {
    activity: {
      svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M57.89 397.2c-6.262-8.616-16.02-13.19-25.92-13.19c-23.33 0-31.98 20.68-31.98 32.03c0 6.522 1.987 13.1 6.115 18.78l46.52 64C58.89 507.4 68.64 512 78.55 512c23.29 0 31.97-20.66 31.97-32.03c0-6.522-1.988-13.1-6.115-18.78L57.89 397.2zM496.1 352c-44.13 0-79.72 35.75-79.72 80s35.59 80 79.72 80s79.91-35.75 79.91-80S540.2 352 496.1 352zM640 99.38c0-13.61-4.133-27.34-12.72-39.2l-23.63-32.5c-13.44-18.5-33.77-27.68-54.12-27.68c-13.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2 192.8 220.4 230.9 183.4 273.4c-24.22 27.88-59.18 63.99-103.5 99.63l56.34 77.52c53.79-35.39 99.15-55.3 127.1-67.27c51.88-22 101.3-49.87 146.9-82.1l202.3-146.7C630.5 140.4 640 120 640 99.38z"/></svg>'
    },
    people: {
      src: './people.png'
    }
  }
}
```

--------------------------------

### Using Custom Emojis with Emoji-Mart React

Source: https://github.com/missive/emoji-mart/blob/main/README.md

This snippet demonstrates how to define and use custom emojis with the Emoji-Mart React component. It requires importing the necessary data and the Picker component. Custom emojis are provided as an array of category objects, each containing an array of emoji objects with properties like id, name, keywords, and skins (supporting multiple sources/formats like PNG, GIF).

```javascript
import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

const custom = [
  {
    id: 'github',
    name: 'GitHub',
    emojis: [
      {
        id: 'octocat',
        name: 'Octocat',
        keywords: ['github'],
        skins: [{ src: './octocat.png' }],
      },
      {
        id: 'shipit',
        name: 'Squirrel',
        keywords: ['github'],
        skins: [
          { src: './shipit-1.png' }, { src: './shipit-2.png' }, { src: './shipit-3.png' },
          { src: './shipit-4.png' }, { src: './shipit-5.png' }, { src: './shipit-6.png' },
        ],
      },
    ],
  },
  {
    id: 'gifs',
    name: 'GIFs',
    emojis: [
      {
        id: 'party_parrot',
        name: 'Party Parrot',
        keywords: ['dance', 'dancing'],
        skins: [{ src: './party_parrot.gif' }],
      },
    ],
  },
]

function App() {
  return (
    <Picker data={data} custom={custom} />
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.