graykick / react-marquee-double Goto Github PK

class MarqueeLines extends Component {
  render() {
    const {placement} = this.props;
    const text = 'Text '.repeat(60).split(' ');
    const display = () =>{
      return  text.map((value, index)=>(
        <span className="item" key={index}>{value}</span>
      ))
    };
    return (
      <StyledMarqueContainer className={placement}>
        <MarqueeDouble
          ref={(ref) => {this.marquee = ref}}
          step={1}
          interval={20}
          autoStart
          direction="left"
          delay={0}
          onStart={()=>{this.marquee.delay()}}>
          <div>{display()}</div>
        </MarqueeDouble>
      </StyledMarqueContainer>
    );
  }
}