react-timeline-carousel

UI Component in the SNS form of Timeline Feed Slider for Developer with REACT

리액트를 사용하는 개발자 분들에게 제공하는 SNS 타임라인 피드 형태의 UI 컴포넌트 입니다.

Screenshots - "화면갈무리"이에요

제가 IU를 좋아해서.. 팬입니다..

Features - 브라우저 지원은 이렇습니다

• Supports IE9, IE10, Chrome, Firefox & Safari

Install - 이렇게 설치하세요

npm install --save rc-timeline-carousel

It's sooooooooooo easy? isn't it?

간단합니다. 그렇죠?

Usage - 이렇게 사용하세요

import React from 'react';
import ReactDOM from 'react-dom';
import CarouselTimeline from 'rc-timeline-carousel'
import 'rc-timeline-carousel/src/css/Timeline.css'


ReactDOM.render(
    <CarouselTimeline />
, document.getElementById('root'));

Link to DEMO - 이곳에서 사용해 보세요

Online demo

Parameter

You can add a content or custumize a css design

이 캐러셀에다가 컨텐츠를 넣거나 css 디자인도 가능하답니다.

...

let contents = [{...}];
let config = {...};
let startIdx = 0;

class YourComponent extends Component {
  render() {
    return (
        <CarouselTimeline data={contents} config={config} startIdx={startIdx}/>
    );
  }
}

Data

let contents = [
  {
    mediaType: "image/video" //[image,video]
    , mediaSrc: ""  //image or video url
    , profile: {
      profileImgSrc: "" //profile image url
      , profileName: "" //profile name
      , profileIntro: "" //profile Introduce Comment
    }
    , boardContent: {
      textSrc: "" //board Text Contents
    }
  }
]

config

let config= {
  containerHeight : 400 //400px;
  ,itemHeight : 90 // 90%
  ,fstItemWidth : 700 //focus Item width 700(timelinefeed)
  , anotherItemWidth: 400 //unfocus Item width
  , contentType: 'timeline-feed' // ['timeline-feed', 'media-only', 'custom']
  , eventConfig : {
    mouse : true // for PC [true, false]
    ,touch : true // for Mobile [true, false]
    ,key : true // [true, false]
  }
  ,naviConfig : {
    button: true // [true, false]
    , paging : true //paging [true, false]
    , position: 'outer-bottom' // [inner-top, inner-bottom, outer-top, outer-bottom]
    , both : false // [true, false]
  }
}

startIdx

let startIdx = 1; //start idx 1

Development - 뿅

use create-react-app

npm install create-react-app
create-react-app yourApp
npm start

Example - 예시에요

npm start and then go to http://localhost:3000/

License - 퍼가요~♥

rc-timeline-carousel is released under the MIT license.