https://github.com/rfoel/ionic-emoji-picker

Emoji picker for Ionic 3
https://github.com/rfoel/ionic-emoji-picker

emoji emoji-picker ionic

Last synced: about 2 months ago
JSON representation

Emoji picker for Ionic 3

• Host: GitHub
• URL: https://github.com/rfoel/ionic-emoji-picker
• Owner: rfoel
• License: mit
• Created: 2018-06-13T16:22:59.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-14T18:05:31.000Z (over 6 years ago)
• Last Synced: 2024-10-31T16:47:05.720Z (about 2 months ago)
• Topics: emoji, emoji-picker, ionic
• Language: TypeScript
• Homepage:
• Size: 268 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/ionic-emoji-picker.svg)](https://badge.fury.io/js/ionic-emoji-picker)

# Emoji picker for Ionic 3

This project was forked from the [ionic3-emoji-picker](https://github.com/danielehrhardt/ionic3-emoji-picker) project created by [danielehrhardt](https://github.com/danielehrhardt)

# Installation

## Install the module via NPM

```shell

npm i ionic-emoji-picker --save

```

## Import it in your app's module(s)

Import `EmojiPickerModule.forRoot()` in your app's main module

app.module.ts

```ts

import { EmojiPickerModule } from 'ionic-emoji-picker';

@NgModule({

    ...

    imports: [

      ...

      EmojiPickerModule.forRoot()

      ],

    ...

})

export class AppModule {}

```

If your app uses lazy loading, you need to import `EmojiPickerModule` in your shared module or child modules:

```ts

import { EmojiPickerModule } from 'ionic-emoji-picker';

@NgModule({

    ...

    imports: [

      ...

      EmojiPickerModule

      ],

    ...

})

export class SharedModule {}

```

### Sample

```html

  

```

```ts

toggled: boolean = false;

message: string;

handleSelection(event) {

  this.message += event.char;

}

```

### Directive API:

```html

      

    

```

### Emitter `(emojiPickerSelect)="handleSelection($event)"`

```

$event = EmojiEvent{ char : "😌", label : "relieved" }

```

## EmojiPickerCaretEmitter

added for your convenience, emits information regarding a contenteditable enabled element

### Emitter `(emojiPickerCaretEmitter)="handleCaretChange($event)"`

```

$event = CaretEvent{ caretOffset: 13, caretRange: Range{...}, textContent: 'content of div or input' }

```

Emoji Picker will get placed relative the element chosen via the directive api, centered and within window borders