update

Author: aaaaaa

README.en.md

@@ -0,0 +1,40 @@
+# react-scroll-log-text
+
+> 这是一个react文字滚动插件
+
+[![NPM](https://img.shields.io/npm/v/react-scroll-log-text.svg)](https://www.npmjs.com/package/react-scroll-log-text) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+[Document](README.en.md)
+
+## 安装
+
+```bash
+npm install --save react-scroll-log-text // or yarn add react-scroll-log-text
+```
+
+## 使用
+
+```jsx
+import React, { Component } from 'react'
+
+import MyComponent from 'react-scroll-log-text'
+import 'react-scroll-log-text/dist/index.css'
+
+class Example extends Component {
+  render() {
+    return <MyComponent />
+  }
+}
+```
+
+## Props
+
+Available props for component:
+
+|Name|Descr|Default|
+|---|---|---|
+| `speed` | Set the animation speed (0-100) | 100 |
+
+## License
+
+MIT © [rfw](https://github.com/rfw)

README.md

@@ -1,16 +1,21 @@
 # react-scroll-log-text
 
-> This is a React log text scrolling component.
+> 这是一个react文字滚动插件
 
 [![NPM](https://img.shields.io/npm/v/react-scroll-log-text.svg)](https://www.npmjs.com/package/react-scroll-log-text) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-## Install
+[Document](README.en.md)
+
+<img src="example/demo.gif">
+![alt text](https://github.com/rfw/react-scroll-log-text/blob/main/example/demo.gif?raw=true)
+
+## 安装
 
 ```bash
-npm install --save react-scroll-log-text
+npm install --save react-scroll-log-text // or yarn add react-scroll-log-text
 ```
 
-## Usage
+## 使用
 
 ```jsx
 import React, { Component } from 'react'
@@ -25,6 +30,18 @@ class Example extends Component {
 }
 ```
 
+## 参数
+
+|字段|描述|类型|默认值|
+|---|---|---|---|
+| `data` | 数据 | Array or Object | [] |
+| `animateSpeed` | 动画滚动过渡时间，单位：秒 | Number | 1 |
+| `length` | 大于length条数据开始滚动 | Number | 5 |
+| `liStyle` | li标签的sytle (像素必须加单位px) | Object |  |
+| `childrenFc` | 自定义渲染item组件，如data为多个字段时 | function |  |
+
+举个例子：[example](example)
+
 ## License
 
 MIT © [rfw](https://github.com/rfw)

example/demo.gif

@@ -4,16 +4,22 @@ import ScrollText from 'react-scroll-log-text'
 import 'react-scroll-log-text/dist/index.css'
 
 const App = () => {
-	const [data, setData ] = useState(['aaaa','bbbbb', 'ccc', 'dddd']); // 默认数据
+	const [data, setData ] = useState(['aaaa','bbbbb', 'cccc', 'dddd']); // 默认数据
 
-	useEffect(() =>{
+  // Simulate update data
+  useEffect(() =>{
 		setInterval(()=> {
 			const arr = [Math.random()];
-			setData(arr)
+			setData(arr) // update one data
 		}, 3000);
 	}, [])
 
-	return <ScrollText data={data} length={4} liStyle={{lineHeight: '40px'}} childrenFc={(v) => <div>={v}=</div>}/>
+	return <ScrollText
+    data={data}
+    length={4}
+    liStyle={{lineHeight: '40px'}}
+    childrenFc={(v) => <div>={v}=</div>}
+  />
 }
 
 export default App

example/src/App.js

@@ -6,7 +6,7 @@ export default class ScrollText extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      data: props.data,
+      data: props.data || [],
       marginTop: '0',
       animate: false
     }
@@ -69,7 +69,7 @@ export default class ScrollText extends React.Component {
         id={styles.scrollList}
         style={
           animate
-            ? { transition: ` margin ${animateSpeed || 1}s`, marginTop }
+            ? { transition: ` margin ${animateSpeed}s`, marginTop }
             : { marginTop }
         }
       >
@@ -90,3 +90,8 @@ ScrollText.propTypes = {
   data: PropTypes.array.isRequired, // 数据
   childrenFc: PropTypes.func // 自定义渲染item
 }
+
+ScrollText.defaultProps = {
+  animateSpeed: 1,
+  length: 5
+}