loom/reactions

This is the open-source Tailwindcss version of Looms’s beautiful Emoji Toolbar React component to react to anything.

Demo

View the demo here: https://reaction-demo.vercel.app

Installation

Requirements

• tailwindcss
• tailwindcss-animate

It’s pretty easy to install. I made it a standalone component that you can copy in your codebase.

1. Copy the toolbar component

   cp ./app/toolbar.tsx your-project/components/toolbar.tsx

   or go directly to it here: toolbar.tsx

2. Add keyframes and animation to your tailwind.config.ts

   import type { Config } from "tailwindcss";
   
   const config: Config = {
     content: [
       "./pages/**/*.{js,ts,jsx,tsx,mdx}",
       "./components/**/*.{js,ts,jsx,tsx,mdx}",
       "./app/**/*.{js,ts,jsx,tsx,mdx}",
     ],
     theme: {
       fontFamily: {
         emoji: [
           "Twemoji Mozilla",
           "Apple Color Emoji",
           "Noto Color Emoji",
           "Segoe UI Emoji",
           "Segoe UI Symbol",
           "Segoe UI",
           "EmojiOne Color",
           "Android Emoji",
         ],
       },
       extend: {
         keyframes: {
           flyEmoji: {
             "0%": {
               transform: "translateY(0) scale(1)",
               opacity: "0.7",
             },
             "100%": {
               transform: "translateY(-150px) scale(2)",
               opacity: "0",
             },
           },
         },
         animation: {
           flyEmoji: "flyEmoji 1s forwards",
         },
       },
     },
     plugins: [require("tailwindcss-animate")],
   };
   export default config;

3. Import into your page

   import { Toolbar } from "@/components/toolbar";
   
   export default function Home() {
     return (
       <>
         // ...
         <Toolbar />
         // ...
       </>
     );
   }

4. Change the emojis in the REACTIONS object in toolbar.tsx

   // ...
   const REACTIONS = [
     {
       emoji: "😂",
       label: "joy",
     },
     {
       emoji: "😍",
       label: "love",
     },
     {
       emoji: "😮",
       label: "wow",
     },
     {
       emoji: "🙌",
       label: "yay",
     },
     {
       emoji: "👍",
       label: "up",
     },
     {
       emoji: "👎",
       label: "down",
     },
   ];

Future Ideas

• onClick handler
• size prop to adjust the size of the toolbar
• dark mode support

Inspiration

• Thanks to the @loom design team for the awesome component.
• Thanks to @shadcn who gave me a new joy for UI design.

GitHub

View Github