@nekzus/react-xplosion NPM

React Xplosion Animation

Xplosion is a React component that creates an explosion animation for text.

Installation

To install the library using npm, run the following command:

npm install @nekzus/react-xplosion

Usage

Basic Implementation

The Xplosion component can be easily incorporated into your React application. Simply provide the text you want to animate as the textInput prop:

import React from 'react';
import {Xplosion} from '@nekzus/react-xplosion';


const App = () => {
  return (
    <Xplosion textInput="Hello, world!" className="class-tw">
      <button>Click here!</button>
    </Xplosion>
  );
};

export default App;

Props

The Xplosion component accepts the following props:

textInput (required): The text to be animated explosively.
className: Additional class names to be applied to the component tailwind CSS.
colorClassName: A color class to specify the color scheme of the explosive animation. Available options: "blueColor", "greenColor", "pinkColor", "orangeColor", "darkColor", "lightColor".
style: Additional styles to be applied to the component CSS.

Example with Custom Styling

You can customize the appearance of the Xplosion component by providing additional styles or class names:

import React from 'react';
import {Xplosion} from '@nekzus/react-xplosion';

const App = () => {
  return (
    <Xplosion
      textInput="Hello, World!"
      className="class-tw"
      colorClassName="pinkColor"
      style={{ fontSize: '24px', fontWeight: 'bold' }}
    >
      <p>Hover over me with style</p>
    </Xplosion>
  );
};

export default App;