DEV Community

Elango Sundar
Elango Sundar

Posted on

React Blink Component

React Blink

This reusable React component will manage to blink any text and changing the text color and font size if we need.

Blink takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.

Example

import React, { Component } from "react";
import Blink from 'react-blink-text';

class Application extends Component {
  render() {
    return (
      <div className="Application">
        <Blink color='blue' text='TestReactApp' fontSize='20'>
          Testing the Blink
        </Blink> 
      </div>
    );
  }
}
export default Application;

Features

  1. Supports all html tags : H1, H2, h3,..,etc., Span, Div, A Href tag.
  2. Supports all different types of colors
  3. Supports server-side rendering.

Installation

Yarn:

yarn add react-blink-text

Npm:

npm install --save react-blink-text

Repo Link:

Link : https://github.com/10secondsofcode/react-blink-text
Create Issue : https://github.com/10secondsofcode/react-blink-text/issues/new

Top comments (3)

Collapse
 
giteden profile image
Eden Ella • Edited

Hi @10secondsofcode I've exported your reusable component to Bit (you can play with it in Bit's live playground, install it using NPM or yarn or get the source code right into your repository, using 'bit import'):

bit.dev/eden/10secondsofcode/react...

Collapse
 
10secondsofcode profile image
Elango Sundar

Thanks Eden :)

Collapse
 
dance2die profile image
Sung M. Kim • Edited

Time to party like it's 90s~

🕺