# react-auto-glide

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

Latest version **2.0.3** (published 2021-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-auto-glide
pnpm add react-auto-glide
yarn add react-auto-glide
bun add react-auto-glide
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2021-01-26 |
| First published | 2021-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 28.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | elijah-burke |
| Maintainers | elijah-burke |
| Keywords | glide, auto, scroll, scrollable, react, carousel, slide, customizable |

## Links

- npm: https://www.npmjs.com/package/react-auto-glide
- Repository: https://github.com/ElijahBurke/react-horizontal-scroll
- Homepage: https://autoglide.netlify.app/
- Issues: https://github.com/ElijahBurke/react-horizontal-scroll/issues
- npm.io page: https://npm.io/package/react-auto-glide

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 2.0.3 (latest) — 2021-01-26
- 2.0.2 — 2021-01-26
- 2.0.1 — 2021-01-26
- 2.0.0 — 2021-01-26
- 1.1.7 — 2021-01-26
- 1.1.6 — 2021-01-26
- 1.1.5 — 2021-01-26
- 1.1.4 — 2021-01-26
- 1.1.3 — 2021-01-26
- 1.1.2 — 2021-01-26
- 1.1.1 — 2021-01-26
- 1.1.0 — 2021-01-26
- 1.0.9 — 2021-01-26
- 1.0.8 — 2021-01-25
- 1.0.7 — 2021-01-25
- … 7 more at https://npm.io/package/react-auto-glide/versions

## README

# React Auto Glide

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

[![NPM](https://img.shields.io/npm/v/react-auto-scroll.svg)](https://www.npmjs.com/package/react-auto-scroll) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm i react-auto-glide
```

## Usage

[See the docs for more in depth demos and examples!](https://autoglide.netlify.app/)

```jsx
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](https://autoglide.netlify.app/)

| 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 |

## License

MIT © [ElijahBurke](https://github.com/ElijahBurke)

---
_Source: https://npm.io/package/react-auto-glide · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._