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.

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:

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:

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:

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:

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:

import PopMessage from 'chatanimations/PopMessage';

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