Fork me on GitHub

React-NoVacancy Text neon golden effect React component.

Demo

If you can see this, something is broken (or JS is not enabled)!!.

Installation

npm install --save react-novacancy

Syntax

General

'use strict';

var React = require('react');
var NoVacancy = require('react-novacancy');

React.render(<div>
        <NoVacancy text={'No'}
                   className={'title-1'}
                   fontSize={'75px'}
                   reblinkProbability={0.1}
                   blinkMin={0.2}
                   blinkMax={0.6}
                   loopMin={8}
                   loopMax={10}
                   lightColor={'#fff'}
                   glow={['0 0 80px #ffffff', '0 0 30px #008000', '0 0 6px #0000ff']} />
        <NoVacancy text={'Vacancy'}
                   className={'title-2'}
                   fontSize={'75px'}
                   blink={1} off={1}
                   lightColor={'#f00'}
                   glow={['0 0 80px Red', '0 0 30px FireBrick', '0 0 6px DarkRed']} />
      </div>,
      document.getElementById('content'));

Props

key default description
className '' CSS class name.
reblinkProbability (1 / 3) Probability of reblink(0 to 1).
blinkMin 0.01 Time(sec.) of minimum blink.
blinkMax 0.5 Time(sec.) of maximum blink.
loopMin 0.5 Time(sec.) of minimum trigger blink.
loopMax 2 Time(sec.) of maximum trigger blink.
lightColor '#fff' Light font color. (string)
darkColor '#ffa500' Dark font color. (string)
glow ['0 0 80px Orange', '0 0 30px Red', '0 0 6px Yellow'] Array of text-shadow colors. (array)
off 0 Amount of off chars.
blink 0 Amount of blink chars. (0 means all chars)
start true Start to blink.

Based on

novacancy.js - by @chuckyglitch

Lincense

MIT License