npm package: @russelloje/lazy-emoji
Description: A moving-emoji component with Framer Motion animations
Author: Russell Oje
Latest version: 1.2.1

# LazyEmoji Component

The `LazyEmoji` component is a playful React component that animates an emoji (such as a mouse, fish, or other animals) across the screen, with customizable positioning, animation behavior, and text tooltips. It is designed to be wrapped in the `EmojiWrapper` component for proper styling and positioning.

## Props

### LazyEmoji Props

The `LazyEmoji` component accepts the following props:

| Prop Name              | Type                                                                 | Default Value                      | Description                                                                 |
|------------------------|----------------------------------------------------------------------|------------------------------------|-----------------------------------------------------------------------------|
| `isAnimating`          | `boolean`                                                            | `false`                            | Determines whether the emoji is animating or static.                         |
| `showDialogue`         | `() => void`                                                         | `() => {}`                         | Function triggered when the emoji is clicked while moving (not at rest).    |
| `texts`                | `string[]`                                                           | `[]`                               | Array of text strings displayed in a tooltip when the emoji is clicked at rest. |
| `buttonClass`          | `string`                                                             | `'__lazy-emoji--fallback-button'`  | CSS class for the emoji button.                                             |
| `buttonClassHidden`    | `string`                                                             | `'__lazy-emoji--fallback-hidden'`  | CSS class applied when the emoji button is hidden.                          |
| `buttonClassRest`      | `string`                                                             | `'__lazy-emoji--fallback-button-rest'` | CSS class applied when the emoji is at rest.                           |
| `buttonClassActive`    | `string`                                                             | `'__lazy-emoji--fallback-button-active'` | CSS class applied when the emoji is active (moving).                 |
| `containerClass`       | `string`                                                             | `'__lazy-emoji--fallback-container'` | CSS class for the container element.                                     |
| `containerClassHidden` | `string`                                                             | `'__lazy-emoji--fallback-hidden'`  | CSS class applied when the container is hidden.                             |
| `containerClassRest`   | `string`                                                             | `'__lazy-emoji--fallback-container-semibold'` | CSS class applied when the container is at rest.                |
| `tooltipClass`         | `string`                                                             | `'__lazy-emoji--fallback-tooltip'` | CSS class for the tooltip element.                                          |
| `sleepClass`           | `string`                                                             | `'__lazy-emoji--fallback-sleep'`   | CSS class for the sleep animation ("Zz") when the emoji is at rest.         |
| `corner`               | `'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'`       | `'bottom-left'`                    | Specifies the corner where the emoji rests.                                 |
| `restDirection`        | `'up' | 'right' | 'down' | 'left'`                               | `'down'`                           | Direction the emoji faces when at rest.                                     |
| `animal`               | `'fish' | 'spider' | 'rabbit' | 'mouse' | 'butterfly'`          | `'mouse'`                          | The type of animal emoji to display.                                        |
| `disappear`            | `boolean`                                                            | `false`                            | Enables a disappearing effect with a tooltip when clicked during animation.  |
| `disappearTexts`       | `string[]`                                                           | `['You lie!']`                     | Array of text strings displayed in the tooltip during the disappear effect.  |

### EmojiWrapper Props

The `EmojiWrapper` component accepts the following props:

| Prop Name       | Type        | Default Value                          | Description                                          |
|-----------------|-------------|----------------------------------------|------------------------------------------------------|
| `children`      | `ReactNode` | `undefined`                            | The content to be wrapped (typically `LazyEmoji`).   |
| `wrapperClass`  | `string`    | `'__lazy-emoji--fallback-wrapper'`     | CSS class for the wrapper div.                       |

## Installation

To use the `LazyEmoji` and `EmojiWrapper` components, install the package via npm:

```bash
npm install lazy-emoji-component
```

Ensure you have the following dependencies installed in your project:

- `react` (version 16.8 or higher for hooks)
- `motion` (formerly framer-motion)

You can install `motion` if not already included:
```bash
npm install motion
```

## Usage

Below is an example of how to use the LazyEmoji and EmojiWrapper components in your React application:

```tsx
import React, { useState } from 'react';
import { EmojiWrapper, LazyEmoji } from 'lazy-emoji-component';
import "@russelloje/lazy-emoji/dist/index.css";

function App() {
  const [isAnimating, setIsAnimating] = useState<boolean>(true);

  return (
    <EmojiWrapper>
      <LazyEmoji
        isAnimating={isAnimating}
        texts={[
          "You can't see me!",
          "Let me sleep!",
          "Inside my hole?",
          "Yes, I ate the cookies"
        ]}
        showDialogue={() => void}
        corner="top-right"
        restDirection="up"
        animal="mouse"
        disappear={true}
        disappearTexts={['Uncaught!', 'You lie!']}
      />
    </EmojiWrapper>
  );
}

export default App;
```

## Explanation

#### Wrapping with `EmojiWrapper`:
The `LazyEmoji` component must be wrapped in `EmojiWrapper` to ensure proper styling and positioning.

#### Props Configuration:
- **`isAnimating`**: Controls whether the emoji moves across the screen.
- **`texts`**: Provides an array of messages displayed when the emoji is clicked at rest.
- **`showDialogue`**: A callback function triggered when the emoji is clicked while moving.
- **`corner`**: Sets the resting corner of the emoji (e.g., `top-right`).
- **`restDirection`**: Sets the direction the emoji faces when at rest (e.g., `up`).
- **`animal`**: Specifies the emoji type (e.g., `mouse`).
- **`disappear`**: Enables a disappearing animation with a tooltip when clicked during movement.
- **`disappearTexts`**: Messages shown during the disappear effect.

## License

This package is licensed under the MIT License. See the LICENSE for details.

## Keywords

- React
- Emoji
- Animation
- Motion
- Interactive
- Component
- UI