How to Use Emoji 3D - Complete Integration Guide

Step-by-step guide to integrate Emoji 3D into your React and Next.js projects. Learn installation, configuration, customization, and advanced usage patterns.

Installation

Package Manager Installation

Choose your preferred package manager to install Emoji 3D:

# npm
npm install emoji-3d

# yarn
yarn add emoji-3d

# pnpm
pnpm add emoji-3d

# bun
bun add emoji-3d

Verify Installation

Check that Emoji 3D is properly installed:

npm list emoji-3d

Basic Usage

Import and Use

The simplest way to start using Emoji 3D:

import { Emoji3D } from 'emoji-3d'

export default function MyComponent() {
  return (
    <div>
      <h1>Welcome to my app!</h1>
      <Emoji3D>
        Hello there! 👋 This is so cool! ✨🎉
      </Emoji3D>
    </div>
  )
}

With TypeScript

Emoji 3D includes full TypeScript support:

import { Emoji3D, Emoji3DProps } from 'emoji-3d'

interface MyComponentProps {
  message: string
}

export default function MyComponent({ message }: MyComponentProps) {
  const emojiProps: Emoji3DProps = {
    animationSpeed: 'medium',
    enableHover: true
  }
  
  return (
    <Emoji3D {...emojiProps}>
      {message}
    </Emoji3D>
  )
}

Configuration Options

Animation Settings

Control how your 3D emojis behave:

<Emoji3D
  animationSpeed="slow"     // 'slow' | 'medium' | 'fast'
  animationType="rotate"    // 'rotate' | 'bounce' | 'float'
  enableHover={true}        // Enable hover interactions
  autoPlay={true}          // Start animations automatically
>
  Check out these effects! 🚀🌟
</Emoji3D>

Visual Customization

Customize the appearance of your 3D emojis:

<Emoji3D
  depth={15}               // 3D depth effect (0-30)
  shadowIntensity={0.5}    // Shadow strength (0-1)
  glowEffect={true}        // Add glow around emojis
  perspective={1000}       // 3D perspective distance
>
  Beautiful visuals! 💫✨
</Emoji3D>

Performance Options

Optimize for your specific use case:

<Emoji3D
  lazyLoad={true}          // Load animations when in viewport
  quality="high"           // 'low' | 'medium' | 'high'
  reducedMotion={false}    // Respect user motion preferences
>
  Smooth performance! ⚡🎯
</Emoji3D>

Advanced Usage

Custom Styling

Override default styles with CSS or styled-components:

// With CSS classes
<Emoji3D className="my-custom-emoji">
  Styled emojis! 🎨🖌️
</Emoji3D>

// With inline styles
<Emoji3D style={{ fontSize: '2rem', lineHeight: 1.5 }}>
  Bigger emojis! 📏📐
</Emoji3D>

/* Custom CSS */
.my-custom-emoji {
  font-family: 'Arial', sans-serif;
  letter-spacing: 2px;
}

.my-custom-emoji .emoji-3d-element {
  transition: transform 0.3s ease;
}

Conditional Rendering

Render 3D effects based on conditions:

import { useState } from 'react'
import { Emoji3D } from 'emoji-3d'

export default function ConditionalEmoji() {
  const [enable3D, setEnable3D] = useState(true)
  
  return (
    <div>
      <button onClick={() => setEnable3D(!enable3D)}>
        Toggle 3D Effects
      </button>
      
      {enable3D ? (
        <Emoji3D>Amazing 3D effects! 🌟💫</Emoji3D>
      ) : (
        <span>Regular text with emojis 🌟💫</span>
      )}
    </div>
  )
}

Server-Side Rendering (SSR)

Handle SSR in Next.js applications:

import dynamic from 'next/dynamic'

// Dynamic import to avoid SSR issues
const Emoji3D = dynamic(() => import('emoji-3d').then(mod => mod.Emoji3D), {
  ssr: false,
  loading: () => <span>Loading 3D emojis...</span>
})

export default function MyPage() {
  return (
    <div>
      <h1>My Next.js Page</h1>
      <Emoji3D>
        Server-side safe! 🚀⭐
      </Emoji3D>
    </div>
  )
}

Integration Patterns

Chat Applications

Perfect for messaging interfaces:

import { Emoji3D } from 'emoji-3d'

function ChatMessage({ message, timestamp, user }) {
  return (
    <div className="chat-message">
      <div className="user-info">
        <strong>{user}</strong>
        <span>{timestamp}</span>
      </div>
      <Emoji3D
        animationType="bounce"
        enableHover={true}
        className="message-content"
      >
        {message}
      </Emoji3D>
    </div>
  )
}

Blog Posts

Enhance content readability:

import { Emoji3D } from 'emoji-3d'

function BlogPost({ content }) {
  return (
    <article className="blog-post">
      <Emoji3D
        animationSpeed="slow"
        quality="high"
        lazyLoad={true}
      >
        {content}
      </Emoji3D>
    </article>
  )
}

Social Media Cards

Make posts more engaging:

import { Emoji3D } from 'emoji-3d'

function SocialCard({ post }) {
  return (
    <div className="social-card">
      <div className="card-header">
        <img src={post.avatar} alt={post.username} />
        <span>{post.username}</span>
      </div>
      <Emoji3D
        animationType="float"
        depth={20}
        glowEffect={true}
      >
        {post.content}
      </Emoji3D>
      <div className="card-actions">
        <button>Like 👍</button>
        <button>Share 📤</button>
      </div>
    </div>
  )
}

Best Practices

Performance Optimization

  1. Use Lazy Loading: Enable lazyLoad for content below the fold
  2. Choose Appropriate Quality: Use quality="low" for mobile devices
  3. Limit Concurrent Animations: Avoid too many animated emojis simultaneously
  4. Respect User Preferences: Check prefers-reduced-motion settings

Accessibility

  1. Preserve Semantic Meaning: Emojis should enhance, not replace, clear text
  2. Provide Alt Text: Ensure screen readers can interpret emoji content
  3. Motion Sensitivity: Respect user motion preferences
  4. Keyboard Navigation: Ensure interactive elements are keyboard accessible

User Experience

  1. Consistent Animation: Use similar settings across your application
  2. Meaningful Enhancement: Apply 3D effects where they add value
  3. Performance Monitoring: Watch for frame rate drops on lower-end devices
  4. Progressive Enhancement: Ensure content works without 3D effects

Troubleshooting

Common Issues

Emojis not rendering in 3D:

  • Check that the component is properly imported
  • Verify emoji characters are supported
  • Ensure JavaScript is enabled

Performance issues:

  • Reduce animation quality
  • Enable lazy loading
  • Limit concurrent animations
  • Check device capabilities

SSR hydration mismatches:

  • Use dynamic imports for SSR
  • Add proper loading states
  • Consider client-side only rendering

Debug Mode

Enable debug information for troubleshooting:

<Emoji3D debug={true}>
  Debug mode active! 🔍🐛
</Emoji3D>

Next Steps

Now that you know how to use Emoji 3D, explore these resources:

Ready to create amazing 3D emoji experiences? Start building and let your creativity shine!