rc-timeline-carousel

1.0.9 • Public • Published

react-timeline-carousel


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

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

npm version npm download

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.

Package Sidebar

Install

npm i rc-timeline-carousel

Weekly Downloads

2

Version

1.0.9

License

MIT

Unpacked Size

203 kB

Total Files

16

Last publish

Collaborators

  • kimyongyook93