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'));

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.

React Timeline Carousel

React Timeline Feed Slider [UI Component]

React Timeline Carousel Info

⭐ Stars 23
πŸ”— Homepage www.npmjs.com
πŸ”— Source Code github.com
πŸ•’ Last Update a year ago
πŸ•’ Created 2 years ago
🐞 Open Issues 4
βž— Star-Issue Ratio 6
😎 Author kimyongyook