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