update

Author: aaaaaa

README.en.md

@@ -1,18 +1,20 @@
 # 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)
+<img src="example/demo.gif">
 
-## 安装
+
+[文档](README.md)
+
+## Install
 
 ```bash
-npm install --save react-scroll-log-text // or yarn add react-scroll-log-text
+yarn add react-scroll-log-text // or npm install --save react-scroll-log-text
 ```
 
-## 使用
+## Usage
 
 ```jsx
 import React, { Component } from 'react'
@@ -29,11 +31,15 @@ class Example extends Component {
 
 ## Props
 
-Available props for component:
+|name | desc | type | default |
+|---|---|---|---|
+| `data` | data | Array or Object | [] |
+| `animateSpeed` | Animation scroll transition time, unit: second | Number | 1 |
+| `length` | Data larger than 'length' starts to scroll | Number | 5 |
+| `liStyle` | The sytle of the li label (the pixel must be added with the unit px) | Object |  |
+| `childrenFc` | Custom rendering item components, such as when data is multiple fields | function |  |
 
-|Name|Descr|Default|
-|---|---|---|
-| `speed` | Set the animation speed (0-100) | 100 |
+[example](example)
 
 ## License
 

README.md

@@ -1,18 +1,18 @@
 # react-scroll-log-text
 
-> 这是一个react文字滚动插件
+> react js 文字滚动插件
 
 [![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)
-
 <img src="example/demo.gif">
-![alt text](https://github.com/rfw/react-scroll-log-text/blob/main/example/demo.gif?raw=true)
+
+
+[Document](README.en.md)
 
 ## 安装
 
 ```bash
-npm install --save react-scroll-log-text // or yarn add react-scroll-log-text
+yarn add react-scroll-log-text // or npm install --save react-scroll-log-text
 ```
 
 ## 使用

example/demo.gif

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-
+import './index.css';
 import ScrollText from 'react-scroll-log-text'
 import 'react-scroll-log-text/dist/index.css'
 
@@ -14,12 +14,14 @@ const App = () => {
 		}, 3000);
 	}, [])
 
-	return <ScrollText
-    data={data}
-    length={4}
-    liStyle={{lineHeight: '40px'}}
-    childrenFc={(v) => <div>={v}=</div>}
-  />
+	return <div className='demo-box'>
+    <ScrollText
+      data={data}
+      length={7}
+      liStyle={{lineHeight: '30px'}}
+      childrenFc={(v) => <div>This value is : {v}</div>}
+    />
+  </div>
 }
 
 export default App

example/src/App.js

@@ -6,9 +6,23 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.demo-box{
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+
+  width: 300px;
+  height: 208px;
+  overflow: hidden;
+}

example/src/index.css

@@ -7,11 +7,11 @@
 }
 #scrollList li {
     list-style: none;
-    font-size: 12px;
+    font-size: 14px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: 30px;
     margin: 0;
     padding: 0;
-}
+}