react-horselight

a react component , display the data like a horse light.

Example

Installation

npm install react-horselight
#or
yarn add react-horselight

API

| Property | Description | Type | Default | | --- | --- | --- | --- | | className | - | string | - | | data | display data | array | [] | | space | the space of two element | number | 10 | | direction | the elements' move direction | string | "left" | | delayTime | interval exection time(ms) | number | 5000 | | height | - | string/number | 30 | | width | - | string/number | "100%" | | displayCount | count of display elements | number | 4 | | scroll | - | Scroll | - | | debug | show debug logs | boolean | false |

Scroll: | Property | Description | Type | Default | | --- | --- | --- | --- | | speed | element's move speed(ms) | number | 1000 | | step | the step of once remove | number | 1 |

How to use it

import React, { useState } from "react";
import ReactDOM from "react-dom";
import HorseLight from "react-horselight";
import "./index.less";

function getData(data, mode) {
    if (mode === 0) {
        return data;
    } else {
        return (
            <div title={data} style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span style={{ color: "black" }}>{data}</span>
            </div>
        )
    }
}

function getDatas(length, mode) {
    return new Array(length).fill().map((_, idx) => {
        let data = "test" + idx;
        return getData(data, mode)
    })
}

function App(props) {

    let arrayLength = 10, mode = 1;

    const [className, setClassName] = useState("a");
    const [data, setData] = useState(getDatas(arrayLength, mode))
    const [direction, setDirection] = useState("right");
    const [delayTime, setDelayTime] = useState(1000);
    const [height, setHeight] = useState(50);
    const [width, setWidth] = useState(600);
    const [displayCount, setDisplayCount] = useState(4);
    const [scroll, setScroll] = useState({ speed: 400, step: 1 });
    const [space, setSpace] = useState(5);

    const changeClassName = () => {
        setClassName(cs => {
            if (cs === "a") return "b";
            if (cs === "b") return "a";
        });
    }

    const changeSpace = () => {
        setSpace(sp => sp + 10);
    }

    const changeWidth = () => {
        setWidth(width => width + 5);
    }

    const pushData = () => {
        let oldData = data;
        oldData.push(getData(Math.round(Math.random() * 10 + 1)));
        setData([...oldData]);
    }

    const changeData = () => {
        setData(getDatas(arrayLength, mode));
    }

    const filterData = () => {
        let oldData = data;
        let id = Math.round(Math.round(Math.random() * (arrayLength - 1) + 0));
        oldData = oldData.filter((_, idx) => idx !== id);
        setData(oldData);
    }

    const changeDirection = () => {
        setDirection(dir => {
            if (dir === "left") return "right";
            if (dir === "right") return "left";
        })
    }

    const changeDelayTime = () => {
        setDelayTime(de => de + 1);
    }

    const changeHeight = () => {
        setHeight(he => he + 1);
    }

    const changeDisplayCount = () => {
        setDisplayCount(ds => ds + 1)
    }

    const changeScroll = () => {
        setScroll(sc => ({ ...sc, step: sc.step + 1 }))
    }

    return (
        <div>
            <button onClick={changeClassName}>change className</button>
            <button onClick={changeHeight}>change height</button>
            <button onClick={changeSpace}>change space</button>
            <button onClick={pushData}>push data</button>
            <button onClick={changeData}>change data</button>
            <button onClick={filterData}>filter data</button>
            <button onClick={changeDirection}>change direction</button>
            <button onClick={changeDelayTime}>change delayTime</button>
            <button onClick={changeWidth}>change width</button>
            <button onClick={changeDisplayCount}>change displaycount</button>
            <button onClick={changeScroll}>change scroll</button>
            <HorseLight
                className={className}
                data={data}
                direction={direction}
                delayTime={delayTime}
                height={height}
                width={width}
                displayCount={displayCount}
                scroll={scroll}
                space={space}
            >
            </HorseLight>
        </div >
    );
}

ReactDOM.render(<App />, document.getElementById("app"));

update

1.0.0

1. 初始化版本

1.0.2/3/4

1. 增加debug