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 - 이렇게 사용하세요
;; ReactDOM;
Link to DEMO - 이곳에서 사용해 보세요
Parameter
You can add a content or custumize a css design
이 캐러셀에다가 컨텐츠를 넣거나 css 디자인도 가능하답니다.
... let contents = ...;let config = ...;let startIdx = 0; { 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.