1.0.3 • Published 4 years ago
item-flowing v1.0.3
Item Flowing
Item Flowing, allows items to change depending on time.
- You can determine how long the items will change.
- You can determine the total duration of the change process.
- You can make the items change within the loop within the specified time.
Demo
Installation & Usage
npm install item-flowingInclude the Component
import ItemFlowing from 'item-flowing';Main Props
| Attributes | Type | Default | Description |
|---|---|---|---|
| flowItems | array | null | An array of numbers or texts to flow. container |
| changedTime | integer | 1000 | Change times of items. |
| topTime | integer | null | The time period when all items will change. The longer the time, the slower the change speed of the items. |
| loop | boolean | true | If you want to use topTime and changedTime together, the loop must be true. The true of the loop allows the items to change at the desired time within a certain time period. And it does this in a loop. That's why changedTime can't be bigger than topTime. |
Usage
import React from 'react'
import ItemFlowing from 'item-flowing';
function App() {
const flowArray = ['Paris', 'Doha', 'Amsterdam', 'Venice', 'Kyoto'];
}Allows flowArray items to change 1 per second.
return (
<ItemFlowing
flowItems={flowArray}
changedTime={1000} #1s
/>
);Allows all flowArray items to change within 20 seconds.
return (
<ItemFlowing
flowItems={flowArray}
topTime={20000} #20s
/>
);Allows flowArray items to change every .5 seconds. And it does this in a loop for 60 seconds
return (
<ItemFlowing
flowItems={flowArray}
changedTime={500} #0.5s
topTime={60000} #1m
loop={true}
/>
);Version 1.0.1
In this version, only texts and numbers are flowing in time.
Contribute
If you have an idea for a missing feature send it up via PR to the src/components folder.
Author
Kenan Günen
License
MIT. Copyright (c) 2020 Kenan Günen.