Wondering what’s next for npm?Check out our public roadmap! »

    ngx-joypixels
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    ngx-joypixels

    Build npm npm npm

    JoyPixels for Angular.

    Usage

    To use this library, install both JoyPixels' emoji-toolkit and this library, ngx-joypixels, from npm.

    # With yarn 
    $ yarn add emoji-toolkit ngx-joypixels
    # With npm 
    $ npm install --save emoji-toolkit ngx-joypixels

    Import the EmojiModule into your app.module.ts and add it to your imports array:

    //...
    import { NgxJoypixelsModule } from 'ngx-joypixels';
     
    import { AppComponent } from './app.component';
     
    @NgModule({
      declarations: [AppComponent],
      imports: [
        //...
        NgxJoypixelsModule
      ]
    })
    export class AppModule {}

    You're now ready to go! Check out the documentation below for using the various pieces of this library. You can also look at this StackBlitz for actual example usage of some of the features.

    Component

    You can use the component for a single shortcode-to-emoji rendering. Simply use the markup below:

    <jp-emoji [shortname]="myVar"></jp-emoji>

    Where myVar is bound to a string with a single shortcode, such as :poop:. That component will then render the emoji.

    Pipe

    Using the pipe is simple. Below is a sample component that makes use of the EmojiPipe.

    import { Component } from '@angular/core';
     
    @Component({
      selector: 'app-root',
      template: ` <div [innerHTML]="text | emoji"></div> `
    })
    export class AppComponent {
      text: string;
     
      constructor() {
        this.text = `This will be converted to JoyPixels emojis! :thumbsup: ❤️`;
      }
    }

    The pipe will then convert the text and the output will correctly have the JoyPixels emoji in place of the shortcode and unicode emoji.

    As JoyPixels simply replaces shortcodes and native unicode emoji, you will need to bind your output to the innerHTML attribute, as is shown in the example above.

    Service

    If you'd rather do conversions yourself, this library provides an easy to use service with various methods for managing your emoji! Simply import EmojiService where you wish to use it, like the example below:

    import { Component } from '@angular/core';
     
    import { EmojiService } from 'ngx-joypixels';
     
    @Component({
      selector: 'app-root',
      template: ` <div>Hello World!</div> `
    })
    export class AppComponent {
      constructor(public emojiService: EmojiService) {
        // Emoji Service methods are available to use!
      }
    }

    shortnameToImage()

    This function takes a shortname, such as :thumbsup:, and returns an <img> tag with the corresponding JoyPixels emoji.

    unicodeToShortname()

    This function takes a native unicode emoji, like ❤️, and returns a the corresponding shortname, in this case, :heart:.

    unicodeToImage()

    This function takes a native unicode emoji, like ❤️, and returns an <img> tag with the corresponding JoyPixels emoji.

    convertText()

    This function takes a string and replaces all instances of native unicode emoji and shortnames with <img> tags with their corresponding JoyPixels emoji. This is what we use internally for the EmojiPipe.

    Install

    npm i ngx-joypixels

    DownloadsWeekly Downloads

    13

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    41.6 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar