Implementing an Emoji Picker in Ruby on Rails Active Admin

Recently, a colleague of mine was tasked with integrating an emoji picker into a Ruby on Rails Active Admin application. To our surprise, our initial Google search yielded no precise solutions to this specific challenge. While the task itself is relatively straightforward, the absence of readily available guidance led to some initial difficulties. It became clear that there was a gap in the online resources regarding this topic. In light of this, I decided to share our experience and insights by documenting the process in this blog post.

Without further ado, let’s delve into the solution.

Here is the gem’s GitHub repository URL: Rails Emoji Picker Gem

Add this line to your application’s Gemfile:

gem 'rails_emoji_picker'

Run command on you terminal

rails g rails_emoji_picker:install
# It copies emoji images to your /assets/images directory

Add emoji picker js file

application.js

//= require rails_emoji_picker

And styles

#if using application.css
application.css

/*
 *= require rails_emoji_picker
 */

If using application.scss
application.scss or sass

@import 'rails_emoji_picker'

run command : bundle exec rake assets:precompile
Restart your server

If you are utilizing HTML.erb for your views or forms, the code is presented as follows:

<p class="emoji-picker-container">
 <%= f.text_field :title, class: 'form-control', data: { emojiable: true } %>
</p>

When considering the integration of the emoji picker within Active Admin…

div class: 'emoji-picker-container' do
 f.input :first_name, input_html: { class: 'form-control', data: { emojiable: true } }
end

Thank you for taking the time to read this blog. I would like to extend my heartfelt appreciation to my friends Shashikant , Pradhumn, as well as to Komal and Mr. Gaurav Gupta Sir, for their invaluable guidance and assistance throughout this endeavor.