react-instagram-carousel

carousel for React that like instagram story.

Tech

• Node.js
• React
• TypeScript
• webpack
• babel
• Jest
• enzyme

Installation

npm install [--save-dev] react-instagram-carousel

Usage

import React from 'react';
import Carousel from 'react-instagram-carousel';

const images = [
  '/img/example1.jpg',
  '/img/example2.jpg',
  '/img/example3.jpg'
];

const App = () => {
  return (
    <div style={{width: '400px', height: '600px'}}>
      <Carousel images={images} />
    </div>
  );
}

export default App;

TypeScript:

import React from 'react';
import Carousel from 'react-instagram-carousel';

const images: string[] = [
  '/img/example1.jpg',
  '/img/example2.jpg',
  '/img/example3.jpg'
];

const App: React.FC = () => {
  return (
    <div style={{width: '400px', height: '600px'}}>
      <Carousel images={images} />
    </div>
  );
}

export default App;

Props

<Carousel
  images={images}
  nextMsec={3000}
  barHeight={3}
  backgroundSize={'contain'}
  backgroundColor={'white'} />

| Props | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | images | string[] | | Yes | URL for images. must length 2 or more. | | nextMsec | number | 5000 | No | time until next image. unit is msec. | | barHeight | number | 1.5 | No | height for progress bar. unit is px. | | backgroundSize | 'cover' or 'contain' | 'cover' | No | background-size property for CSS. | | backgroundColor | string | #202322 | No | background-color property for CSS. |

Example

$ git clone git://github.com/hktysk/react-instagram-carousel.git
$ cd react-instagram-carousel
$ npm install
$ npm start