chatanimations v1.10.5

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.

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.

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 .

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 .

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 .

Example usage:

import PopMessage from 'chatanimations/PopMessage';

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