React-hacker-text NPM

react-hacker-text

npm.io npm.io

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

@infinitebrahmanuniverse/nolb-react-ha @everything-registry/sub-chunk-2558

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago