React-auto-glide NPM

React Auto Glide

Customizable component which lets you have your own content glide smoothly accross the screen.

Install

npm i react-auto-glide

Usage

See the docs for more in depth demos and examples!

import { ReactScrolling } from 'react-auto-glide';
import 'react-auto-glide/dist/index.css'

const imgs = [
  React, Redux, GraphQL, Ramda,
];

const mapper = item => (
  <div className="img-container" key={item}>
    <Img src={item} alt="" />
  </div>
)

const App = () => {
  return (
  <section className="hero">
    <div className="scrolling-container">
      <ReactScrolling
        mapper={mapper}
        list={imgs} 
        time="30s"
        width="100px"
        delayBetweenScroll="1000"
      />
    </div>
  </section>
  )
}

Props

See the docs for more information about each prop and examples of how it effects the container

Prop	Description	Required	Default
mapper	A function for rendering each element in your list exactly as required.	Required	n/a
list	An array of items for the mapper function to be applied too	Required	n/a
time	The amount of time you want it to take for the elements to glide from the right of the container to the left of the container	Not Required	30s
width	String that defines the width for each element inside the div which is scrolling	Not Required	"100px"
delayBetweenScroll	Number that defines ms between element reaching the end of the container and scroll restarting, if no number is entered defaults to no delay	Not Required	No Delay