chatanimations

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>
	);
}