react-hacker-text

npm install --save react-hacker-text or yarn add react-hacker-text

Usage no npm install needed!

<script type="module">
  import reactHackerText from 'https://cdn.skypack.dev/react-hacker-text';
</script>

README

react-hacker-text

NPM JavaScript Style Guide

Install

npm install --save react-hacker-text
or
yarn add react-hacker-text

Usage

To render a hacker text in the page we have to import HackerText:

import React, { Component } from 'react'
import HackerText, { hackerTextFunction } from 'react-hacker-text'

class Example extends Component {
  render () {
    return (
      <HackerText text='react-hacker-text 😄🎉' />
    )
  }
}

HackerText props:

Prop Type Description
text string Text that will be rendered.
element string Element that will be rendered. Default is span.
speed number Speed in milliseconds between characters is changed. Default is 50.
delay number Delay in milliseconds before the text is rendered.
changes number Quantity of characters to be rendered in each character.
characters string The type of characters that will be showed(all, capital-letters, lower-letters, numbers, symbols). Default is all.
onStart function Function called before the render began
onFinished function Function called when finishes the text

To render a hacker text in a input we have to import hackerTextFunction:

import React, { Component } from 'react'
import HackerText, { hackerTextFunction } from 'react-hacker-text'

class Example extends Component {
  state = {
    text: ''
  }
  
  setText = value => this.setState( {text: value} )
  
  render () {
    const options = {changes: 5, speed: 100, characters: 'symbols'}
    
    return (
      <input 
        value={this.state.text} 
        onChange={e => 
          hackerTextFunction(e.target.value, this.setText, options)
        }
      />
    )
  }
}

hackerTextFunction receive 3 params:

Param Type Description
text string Text that will be displayed.
callback function Function called with the changed text.
options object Object that accepts 3 configurations: speed, changes, and characters. Read the HackerText props to know how to use them.

License

MIT © daniellrs