// 安装
npm install easy-typer-js --save
或者
yarn add easy-typer-js

// 引入
import EasyTyper from 'easy-typer-js'
// 实例化
const typed = new EasyTyper(obj, input, fn, hooks)

// 下载至本地
<script src="./easy-typer-js"></script>

//cdn导入
<script src="https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.3/easy-typer-min.js"></script>

  const typing = new EasyTyper(obj, `黎明前的黑暗是最深不见底的黑暗！`, 
    instance => {
      // 回调函数
      // 此回调一般用于获取新的数据然后循环输出
      // instance { 实例EasyTyper }
      console.log(instance) // 打印出实例对象
    }, (output, instance)=>{
      // 钩子函数
      // output { 当前帧的输出内容 }
      // instance { 实例EasyTyper }
      // 通过钩子函数动态更新dom元素
      document.getElementById('output').innerHTML = `${output}`
  })

import EasyTyper from 'easy-typer-js'

class showText extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      output: '',
      typer: null
    }
    this.initTyper = this.initTyper.bind(this)
    this.changeOutput = this.changeOutput.bind(this)
  }

  initTyper() {
    // 配置对象
    const obj = {
      output: '',
      isEnd: false,
      speed: 80,
      singleBack: false,
      sleep: 0,
      type: 'normal',
      backSpeed: 40,
      sentencePause: false
    }
    // 实例化
    this.typer = new EasyTyper(obj, '我是被React所创造出来的！', this.completeAsentence, this.changeOutput)
  }

  // 输出完毕后的回调函数
  completeAsentence() {
    console.log('输出完毕！长官！')
  }

  // 钩子函数和setState结合
  changeOutput(output) {
    this.setState(state => ({
      output: output
    }))
  }

  render() {
    return (
      <p>{this.state.output}</p>
    )
  }
}

<script>
import EasyTyper from 'easy-typer-js'
export default {
  name: 'home',
  data() {
    return {
      obj: {
        output: '',
        isEnd: false,
        speed: 80,
        singleBack: false,
        sleep: 0,
        type: 'rollback',
        backSpeed: 40,
        sentencePause: false
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.fetchData()
    },
    fetchData() {
        // 一言Api进行打字机循环输出效果
      fetch('https://v1.hitokoto.cn')
        .then(res => {
            return res.json()
        })
        .then(({ hitokoto }) => {
            this.initTyped(hitokoto)
        })
        .catch(err => {
            console.error(err)
        })
    },
    initTyped(input, fn, hooks) {
      const obj = this.obj
      const typed = new EasyTyper(obj, input, fn, hooks)
    }
  }
}
</script>

import React from 'react'
import logo from './logo.svg'
import './App.css'
import EasyTyper from 'easy-typer-js'

class showText extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      output: '',
      typer: null
    }
    this.initTyper = this.initTyper.bind(this)
    this.changeOutput = this.changeOutput.bind(this)
  }

  componentDidMount() {
    this.initTyper()
  }

  componentWillUnmount() {
    this.typer.close()
  }

  initTyper() {
    // 配置对象
    const obj = {
      output: '',
      isEnd: false,
      speed: 80,
      singleBack: false,
      sleep: 0,
      type: 'normal',
      backSpeed: 40,
      sentencePause: false
    }
    // 实例化
    this.typer = new EasyTyper(obj, '我是被React所创造出来的！', this.completeAsentence, this.changeOutput)
  }

  // 输出完毕后的回调函数
  completeAsentence() {
    console.log('输出完毕！长官！')
  }

  // 钩子函数和setState结合
  changeOutput(output) {
    this.setState(state => ({
      output: output
    }))
  }

  render() {
    return (
       <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>{this.state.output}</p>
         <a
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
         >
           上帝
         </a>
       </header>
     </div>
    )
  }
}

export default showText

const obj = {
  output: '', // 输出内容  使用MVVM框架时可以直接使用
  type: 'normal',
  isEnd: false,
  speed: 80,
  backSpeed: 40,
  sleep: 3000,
  singleBack: true,
  sentencePause: false
}
const typing = new easyTyper(obj, `黎明前的黑暗是最深不见底的黑暗！`, (instance)=>{
    // 回调函数 如果这里使用了递归调用会一直循环打印，需要在外部触发停止
    // 此回调用于获取新的数据然后重新输出
    instance.input = [`天不生我彭小呆，万古长青一生狂！`]
    instance.play()
  }, (output, instance)=>{
    // 钩子函数，每一帧的数据获取和实例easy-typer-js的获取
    document.getElementById('output').innerHTML = `${output}<span class="easy-typed-cursor">|</span>`
})
// 12秒后停止
let timer = setTimeout(() => {
  clearTimeout(timer)
  timer = null
  typing.close()
  alert('stop!')
}, 12000)

  const obj = {
    // 其他省略
    sentencePause: true // 最后一句将会暂停回滚，常显示下去
  }
  // 数组模式 根据顺序一句一句输出
  const inputArr = [`黎明前的黑暗是最深不见底的黑暗！`, `世界上本没有无用的齿轮，只有齿轮自身能决定它的用途！`, `天不生我彭小呆，万古长青一生狂！`]
  const typing = new EasyTyper(obj, inputArr, ()=>{
    // 回调函数，easyTyper生命周期结束后执行
    console.log('结束了，我的使命！')
  }, (output, instance) => {
    // 钩子函数，每一帧的数据获取和实例EasyTyper的获取
    document.getElementById('output').innerHTML = `${output}`
  })