# Usage

To use the Chat Animations Library in your React application, you can import the various animation components provided by the library and include them in your components.

### Demo

You can see a live demo of all component [Here](https://codesandbox.io/s/unruffled-lamarr-2gcnks).

## WordByWord Component

The `WordByWord` component animates text a word by word effect.

| Prop         | Description                                              |
| ------------ | -------------------------------------------------------- |
| `text`       | The text you want to animate word by word.               |
| `delay`      | The delay (in milliseconds) between each word animation. |
| `getLoading` | A function that can be used to handle loading state.     |
| `getValue`   | A function that can be used to get the value.            |

**Example usage:**

```jsx
import WordByWord from 'chatanimations/WordByWord';

const getValue = (value) => {
	console.log(value);
};

const getLoading = (value) => {
	console.log(value);
};

function App() {
	return (
		<div className='App'>
			<WordByWord
				text={'I am navneet vaishnav'}
				delay={1000}
				getLoading={getLoading}
				getValue={getValue}
			/>
		</div>
	);
}
```

## BounceMessage Component

The `BounceMessage` component animates text with a bounce effect.

| Prop    | Description                                 |
| ------- | ------------------------------------------- |
| `text`  | The text you want to animate bounce effect. |
| `delay` | The delay (in milliseconds) for animation.  |

**Example usage:**

```jsx
import BounceMessage from 'chatanimations/BounceMessage';

function App() {
	return (
		<div className='App'>
			<BounceMessage text={'I am navneet vaishnav'} delay={1000} />
		</div>
	);
}
```

## FadeInSlideInMessage Component

The `FadeInSlideInMessage` component animates with text fade-in and slide-in effect .

| Prop    | Description                                               |
| ------- | --------------------------------------------------------- |
| `text`  | The text you want to animate fade-in and slide-in effect. |
| `delay` | The delay (in milliseconds) for animation.                |

**Example usage:**

```jsx
import FadeInSlideInMessage from 'chatanimations/FadeInSlideInMessage';

function App() {
	return (
		<div className='App'>
			<FadeInSlideInMessage text={'I am navneet vaishnav'} delay={1000} />
		</div>
	);
}
```

## MessageFadeInAnimation Component

The `MessageFadeInAnimation` component animates text with a fade-in effect .

| Prop    | Description                                  |
| ------- | -------------------------------------------- |
| `text`  | The text you want to animate fade-in effect. |
| `delay` | The delay (in milliseconds) for animation.   |

**Example usage:**

```jsx
import MessageFadeInAnimation from 'chatanimations/MessageFadeInAnimation';

function App() {
	return (
		<div className='App'>
			<MessageFadeInAnimation text={'I am navneet vaishnav'} delay={1000} />
		</div>
	);
}
```

## PopMessage Component

The `PopMessage` component animates text with a pop effect .

| Prop    | Description                                  |
| ------- | -------------------------------------------- |
| `text`  | The text you want to animate fade-in effect. |
| `delay` | The delay (in milliseconds) for animation.   |

**Example usage:**

```jsx
import PopMessage from 'chatanimations/PopMessage';

function App() {
	return (
		<div className='App'>
			<PopMessage text={'I am navneet vaishnav'} delay={1000} />
		</div>
	);
}
```