react-hacker-text

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