tubelight-blink

A React component for creating blinking text animations. This component allows you to customize the blink speed and timing for different words.

Installation

To install the package, use npm:

npm install tubelight-blink

Usage

Import the Blink component from the package and use it in your React project. You can specify different blink timings for different words.

Example

Here's a basic example of how to use the Blink component:

import React from 'react';
import Blink from 'tubelight-blink';

const App = () => {
    return (
        <div>
            <Blink
                text="MUJ HACK 2.0"
                words={[
                    { word: 'MUJ', duration: 5000 },
                    { word: 'HACK', duration: 10000 },
                    { word: '2.0', duration: 15000 }
                ]}
            />
        </div>
    );
};

export default App;

Props

• text (string): The text to be displayed with blinking animation.
• blinkConfig (array of objects): Configuration for each word's blink timing. Each object should contain:
  • word (string): The word that should blink.
  • duration (number): The duration in milliseconds for how long the word should blink.

Example with Custom Blink Speed

To change the blink speed for different words, modify the blinkConfig prop as shown below:

import React from 'react';
import Blink from 'tubelight-blink';

const App = () => {
    return (
        <div>
            <Blink
                text="Welcome to the React Blink Text Animation"
                blinkConfig={[
                    { word: 'Welcome', duration: 3000 },
                    { word: 'React', duration: 6000 },
                    { word: 'Blink', duration: 9000 },
                    { word: 'Text', duration: 12000 },
                    { word: 'Animation', duration: 15000 }
                ]}
            />
        </div>
    );
};

export default App;