react-awesome-component-carousel v0.1.3

⚙️ React Awesome Component Viewer 🌈

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

npm install --save react-awesome-component-carousel

Examples

Basic use

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