# @stianlarsen/react-fade-effects

[![npm version](https://badge.fury.io/js/%40stianlarsen%2Freact-fade-effects.svg)](https://badge.fury.io/js/%40stianlarsen%2Freact-fade-effects)

A versatile React library for applying various fade-in effects to your UI components. Starting with the `FadeWords` component, this library will grow to include multiple fade-related components, such as fading text, images, children elements, and more.

## Preview

![Text effect Component](https://github.com/Stianlars1/react-fade-effects/blob/ced110a481610bdecd600bc72cbbfe589b6ff124/preview.gif)

\_A preview of @stianlarsen/react-face-effects

**Check out the [website](https://your-website-link.com) for demos, examples, and further info.**

## Features

- **Smooth Fade Animations**: Easily create engaging fade-in effects for different types of UI elements.
- **Highly Configurable**: Adjust the animation's duration, delay, stagger time, and more to match your design needs.
- **Ease of Integration**: Drop the components into your project and customize them with minimal setup.
- **Built with TypeScript**: Ensures type safety and a better development experience.

## Installation

Install the package using npm:

```bash
npm install @stianlarsen/react-fade-effects
```

Or using yarn:

```bash
yarn add @stianlarsen/react-fade-effects
```

## Usage

### FadeWords Component

The `FadeWords` component allows you to create smooth fade-in effects for text.

#### Example

```jsx
import { FadeWords } from "@stianlarsen/react-fade-effects";

function App() {
  return (
    <FadeWords
      words="Effortless Task Management with TaskBuddy"
      duration={1}
      delay={0.2}
      variant="up"
      scaleSize={1.05}
    />
  );
}
```

#### `FadeWords` Component Props

The `FadeWords` component accepts several props to customize its behavior and appearance:

| Prop              | Type                              | Description                                                                                             |
| ----------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------- |
| `words`           | `string` or `string[]`            | The text or an array of words to be displayed with the fade effect.                                     |
| `className`       | `string`                          | Additional CSS classes to apply to the component.                                                       |
| `filter`          | `boolean`                         | Apply a blur filter during the animation. Defaults to `true`.                                           |
| `duration`        | `number`                          | Duration of the animation in seconds. Defaults to `1`.                                                  |
| `staggerTime`     | `number`                          | Time in seconds to stagger the animation between words. Defaults to `0.1`.                              |
| `delay`           | `number`                          | Delay before the animation starts in seconds. Defaults to `0.2`.                                        |
| `variant`         | default, up, down, left, or right | The direction of the animation. Defaults to `default`.                                                  |
| `scaleSize`       | `number`                          | Scale size for the words during the animation. Defaults to `1`.                                         |
| `once`            | `boolean`                         | Whether the animation should occur only once. Defaults to `true`.                                       |
| `translateAmount` | `number`                          | Custom translate value for the animation. Defaults to `15` for `up`/`down` and `15` for `left`/`right`. |
| `splitChar`       | `string` or `RegExp`              | Character or regex to split the `words` prop. Defaults to space (`' '`).                                |
| `includeSpaces`   | `boolean`                         | Whether to include spaces after each word. Defaults to `true`.                                          |

## Future Components

This package is designed to expand with additional fade components, such as:

- **FadeChildren**: Apply fade-in effects to child elements within a container.
- **FadeImages**: Animate image elements with fade effects.
- **FadeContainers**: Apply fades to entire sections or containers.

Each future component will come with its own set of customizable props, following the same flexible design as `FadeWords`.

## Contributing

Contributions are always welcome! Please feel free to open issues or submit pull requests.

## License

`@stianlarsen/react-fade-effects` is [MIT licensed](./LICENSE).

## Contact

For any questions or suggestions, feel free to reach out.

- GitHub: [@stianlars1](https://github.com/stianlars1)
- Website: [https://stianlarsen.com](https://stianlarsen.com)
- Email: [stian.larsen@mac.com](mailto:stian.larsen@mac.com)