# react-awesome-component-carousel

> An easy to use React Image Viewer component

Latest version **0.1.3** (published 2019-10-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-awesome-component-carousel
pnpm add react-awesome-component-carousel
yarn add react-awesome-component-carousel
bun add react-awesome-component-carousel
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2019-10-17 |
| First published | 2019-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 30.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Michael Hamilton |
| Maintainers | mikeham98 |
| Keywords | image, slider, viewer, react, react-awesome-component-carousel, awesome |

## Links

- npm: https://www.npmjs.com/package/react-awesome-component-carousel
- Homepage: https://github.com/mikeham98/react-awesome-component-carousel
- Issues: https://github.com/mikeham98/react-awesome-component-carousel/issues
- npm.io page: https://npm.io/package/react-awesome-component-carousel

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.7.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.7.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [url-loader](https://npm.io/package/url-loader.md) ^1.1.2
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2019-10-17
- 0.1.2 — 2019-07-13
- 0.1.1 — 2019-05-17
- 0.1.0 — 2019-05-16
- 0.0.2 — 2019-05-13
- 0.0.1 — 2019-05-13

## README

# ⚙️ React Awesome Component Viewer 🌈
<div align="center">
  <a href="https://github.com/mikeham98/react-awesome-component-carousel">
    <img width="250" height="250" src="https://raw.githubusercontent.com/mikeham98/react-awesome-component-carousel/master/assets/react-awesome-component-carousel.svg?sanitize=true">
  </a>
</div>

*react-awesome-component-carousel* is a library that allows you to easily add a viewer for your components that transition between one another. The two available transition modes are fade and slide.

## Installation
```bash
npm install --save react-awesome-component-carousel
```

## Examples
<div>
<div style="display: inline-block; margin-right: 20px;">
<h3>Slide</h3>
<img src="https://raw.githubusercontent.com/mikeham98/react-awesome-component-carousel/master/assets/slide.gif" height="300">
</div>

<div style="display: inline-block; margin-right: 20px;">
<h3>Fade</h3>
<img src="https://raw.githubusercontent.com/mikeham98/react-awesome-component-carousel/master/assets/fade.gif" height="300">
</div>
</div>

## Basic use
```bash
import React from 'react';
import ComponentCarousel from 'react-awesome-component-carousel';

const component1 = () => (
  <div style={{backgroundColor: '#fd3164', height:  '100vh', width: '100vw'}}>
    <h1>Slide 1</h1>
  </div>
);
const component2 = () => (
  <div style={{backgroundColor: '#80a5fd', height:  '100vh', width: '100vw'}}>
    <h1>Slide 2</h1>
  </div>
);
const component3 = () => (
  <div style={{backgroundColor: '#1ccb9e', height:  '100vh', width: '100vw'}}>
    <h1>Slide 3</h1>
  </div>
);

const components = [component1, component2, component3];

export default class App extends React.Component {
  render() {
    return (
      <div style={{ width: '100vw', height: '100vh', position: 'relative', overflow: 'hidden' }}>
        <ComponentCarousel
          transition={'slide'}
          transitionDuration={0.3}
          auto
          autoDuration={3}
          coolOff={6}
          components={components}
        />
      </div>
    );
  }
}
```


  auto: false,
  autoDuration: 3,
  disableButtons: false,
  components: [],
  coolOff: 6,
  transition: slide,
  transitionDuration: 0.3,


## ComponentViewer
### Props
#### Summary
|Name                   |Type         |Description                                                                   |Default value |
|-----------------------|-------------|------------------------------------------------------------------------------|--------------|
|auto                   |boolean      |This determines whether or not the images transition automatically            |false         |
|autoDuration           |number (seconds)      |This sets the duration of when to automatically transition to the next image  |3         |
|components                |array       |This should be an array of components  |[]         |
|coolOff                |number (seconds)       |This is the duration for how long an image pauses before resuming the auto image transition when the next or previous buttons are clicked  |6         |
|disableButtons         |boolean      |This will remove the previous and next buttons  |false         |
|dots         |boolean      |This will add click-able dots to the bottom of the slider to allow the user to navigate the slides  |false         |
|customPrevButton       |component    |This will remove the default left button and use a your custom component, an onClick prop will be passed in  |undefined         |
|customNextButton       |component    |This will remove the default right button and use a your custom component, an onClick prop will be passed in  |undefined         |
|transition             |string       |This can either be set to 'fade' or 'slide' which will set the transition type of the images |'slide'         |
|transitionDuration     |number (seconds)       |This is the duration of the transition  |0.3         |

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