https://github.com/kimyongyook/react-timeline-carousel
React Timeline Feed Slider [UI Component]
https://github.com/kimyongyook/react-timeline-carousel
carousel-component feed npm-package react timeline-component
Last synced: about 1 year ago
JSON representation
React Timeline Feed Slider [UI Component]
- Host: GitHub
- URL: https://github.com/kimyongyook/react-timeline-carousel
- Owner: kimyongyook
- License: mit
- Created: 2019-08-07T10:46:44.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T07:50:19.000Z (over 3 years ago)
- Last Synced: 2025-03-17T17:48:30.217Z (about 1 year ago)
- Topics: carousel-component, feed, npm-package, react, timeline-component
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/rc-timeline-carousel
- Size: 551 KB
- Stars: 22
- Watchers: 3
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-timeline-carousel
---
UI Component in the SNS form of Timeline Feed Slider for Developer with REACT
리액트를 사용하는 개발자 분들에게 제공하는 SNS 타임라인 피드 형태의 UI 컴포넌트 입니다.
[![npm version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[npm-image]: https://badge.fury.io/js/rc-timeline-carousel.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-timeline-carousel
[download-image]: https://img.shields.io/badge/download-github-brightgreen
[download-url]: https://www.npmjs.com/package/rc-timeline-carousel
## Screenshots - "화면갈무리"이에요
제가 IU를 좋아해서..
팬입니다..
## Features - 브라우저 지원은 이렇습니다
* Supports IE9, IE10, Chrome, Firefox & Safari
## Install - 이렇게 설치하세요
```bash
npm install --save rc-timeline-carousel
```
It's sooooooooooo easy? isn't it?
간단합니다. 그렇죠?
## Usage - 이렇게 사용하세요
````js
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(
, document.getElementById('root'));
`````
## Link to DEMO - 이곳에서 사용해 보세요
[Online demo](https://repl.it/@kimyongyook/React-Timeline-Carousel)
## Parameter
You can add a content or custumize a css design
이 캐러셀에다가 컨텐츠를 넣거나 css 디자인도 가능하답니다.
````js
...
let contents = [{...}];
let config = {...};
let startIdx = 0;
class YourComponent extends Component {
render() {
return (
);
}
}
`````
### Data
````js
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
````js
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
````js
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.