UI Component in the SNS form of Timeline Feed Slider for Developer with REACT
리액트를 사용하는 개발자 분들에게 제공하는 SNS 타임라인 피드 형태의 UI 컴포넌트 입니다.
제가 IU를 좋아해서.. 팬입니다..
- Supports IE9, IE10, Chrome, Firefox & Safari
npm install --save rc-timeline-carousel
It's sooooooooooo easy? isn't it?
간단합니다. 그렇죠?
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'));
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}/> ); } }
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 } } ]
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] } }
let startIdx = 1; //start idx 1
use create-react-app
npm install create-react-app
create-react-app yourApp
npm start
npm start and then go to http://localhost:3000/
rc-timeline-carousel is released under the MIT license.