https://github.com/howel52/TypeMachine

React 模拟打字组件
https://github.com/howel52/TypeMachine

Last synced: about 2 months ago
JSON representation

React 模拟打字组件

• Host: GitHub
• URL: https://github.com/howel52/TypeMachine
• Owner: howel52
• Created: 2018-01-18T14:17:39.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-01-21T13:39:50.000Z (over 6 years ago)
• Last Synced: 2024-06-08T02:33:15.500Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 3.91 KB
• Stars: 6
• Watchers: 2
• Forks: 4
• Open Issues: 30
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
TypeMachine 是一个 React 组件，通过简单的配置就能实现打字效果。

![](http://ww3.sinaimg.cn/large/0060lm7Tly1fnoiuwgj0mg30930fv3zt.gif)

# Usage

```

npm install type-machine

```

```

import React form 'react'

import TypeMachine from 'type-machine'

class Demo extends React.Component {

  render () {

    const texts = [

        [{ string: '第一行', color: 'red' }],

        [{ string: '第二行' }, { string: '同行换色', color: 'yellow' }]

      ]

    return (

      

    )

  }

}

export default Demo

```

![](http://ww4.sinaimg.cn/large/0060lm7Tly1fnojvzvw5zg309303hq2q.gif

)

# API

| 参数 | 类型 |

| --- | --- |

| texts | Array |

| speed | Number |

| defaultColor | String |

### texts

```

texts = [

  [{string: ‘第一行’}],

  [{string: ‘第二行’}, {string: '同行变色’, color: ‘red’}],

  [string: ‘换行变色’, color: ‘yellow']

]

```

### speed

```

两个字符间隔时间(ms)

```

### defaultColor

```

rgb(a, b, c) || #FFF || black

```