{"id":17859168,"url":"https://github.com/kimyongyook/react-timeline-carousel","last_synced_at":"2025-03-20T18:31:13.131Z","repository":{"id":35066146,"uuid":"201030579","full_name":"kimyongyook/react-timeline-carousel","owner":"kimyongyook","description":" React Timeline Feed Slider [UI Component]","archived":false,"fork":false,"pushed_at":"2022-12-04T07:50:19.000Z","size":564,"stargazers_count":22,"open_issues_count":11,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-17T17:48:30.217Z","etag":null,"topics":["carousel-component","feed","npm-package","react","timeline-component"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/rc-timeline-carousel","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kimyongyook.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-07T10:46:44.000Z","updated_at":"2022-12-01T07:12:06.000Z","dependencies_parsed_at":"2023-01-15T13:06:08.426Z","dependency_job_id":null,"html_url":"https://github.com/kimyongyook/react-timeline-carousel","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimyongyook%2Freact-timeline-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimyongyook%2Freact-timeline-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimyongyook%2Freact-timeline-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimyongyook%2Freact-timeline-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimyongyook","download_url":"https://codeload.github.com/kimyongyook/react-timeline-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244670057,"owners_count":20490912,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel-component","feed","npm-package","react","timeline-component"],"created_at":"2024-10-28T06:03:21.676Z","updated_at":"2025-03-20T18:31:13.121Z","avatar_url":"https://github.com/kimyongyook.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-timeline-carousel\n---\n\nUI Component in the SNS form of Timeline Feed Slider for Developer with REACT\n\n리액트를 사용하는 개발자 분들에게 제공하는 SNS 타임라인 피드 형태의 UI 컴포넌트 입니다.\n\n[![npm version][npm-image]][npm-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: https://badge.fury.io/js/rc-timeline-carousel.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/rc-timeline-carousel\n[download-image]: https://img.shields.io/badge/download-github-brightgreen\n[download-url]: https://www.npmjs.com/package/rc-timeline-carousel\n\n## Screenshots - \"화면갈무리\"이에요\n\n제가 IU를 좋아해서..\n팬입니다..\n\n\u003cimg src=\"https://user-images.githubusercontent.com/45239851/63210554-e1a53a80-c12a-11e9-9126-84b9aabf9c53.JPG\" width=\"100%\"/\u003e\n\n\u003cimg src=\"https://media.giphy.com/media/h5KkauDFxsGVcoWWuE/giphy.gif\" width=\"100%\"/\u003e\n\n\u003cimg src=\"https://media.giphy.com/media/KGM9tCohNk3yImmNJm/giphy.gif\" width=\"100%\"/\u003e\n\n\n##  Features - 브라우저 지원은 이렇습니다\n\n* Supports IE9, IE10, Chrome, Firefox \u0026 Safari\n\n## Install - 이렇게 설치하세요\n\n```bash\nnpm install --save rc-timeline-carousel\n```\n\nIt's sooooooooooo easy? isn't it?\n\n간단합니다. 그렇죠?\n\n## Usage - 이렇게 사용하세요\n\n\n\n````js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport CarouselTimeline from 'rc-timeline-carousel'\nimport 'rc-timeline-carousel/src/css/Timeline.css'\n\n\nReactDOM.render(\n    \u003cCarouselTimeline /\u003e\n, document.getElementById('root'));\n`````\n\n## Link to DEMO - 이곳에서 사용해 보세요\n\n[Online demo](https://repl.it/@kimyongyook/React-Timeline-Carousel)\n\n## Parameter\n\nYou can add a content or custumize a css design\n\n이 캐러셀에다가 컨텐츠를 넣거나 css 디자인도 가능하답니다.\n\n````js\n...\n\nlet contents = [{...}];\nlet config = {...};\nlet startIdx = 0;\n\nclass YourComponent extends Component {\n  render() {\n    return (\n        \u003cCarouselTimeline data={contents} config={config} startIdx={startIdx}/\u003e\n    );\n  }\n}\n`````\n\n\n### Data\n\n````js\nlet contents = [\n  {\n    mediaType: \"image/video\" //[image,video]\n    , mediaSrc: \"\"  //image or video url\n    , profile: {\n      profileImgSrc: \"\" //profile image url\n      , profileName: \"\" //profile name\n      , profileIntro: \"\" //profile Introduce Comment\n    }\n    , boardContent: {\n      textSrc: \"\" //board Text Contents\n    }\n  }\n]\n`````\n\n### config\n\n````js\nlet config= {\n  containerHeight : 400 //400px;\n  ,itemHeight : 90 // 90%\n  ,fstItemWidth : 700 //focus Item width 700(timelinefeed)\n  , anotherItemWidth: 400 //unfocus Item width\n  , contentType: 'timeline-feed' // ['timeline-feed', 'media-only', 'custom']\n  , eventConfig : {\n    mouse : true // for PC [true, false]\n    ,touch : true // for Mobile [true, false]\n    ,key : true // [true, false]\n  }\n  ,naviConfig : {\n    button: true // [true, false]\n    , paging : true //paging [true, false]\n    , position: 'outer-bottom' // [inner-top, inner-bottom, outer-top, outer-bottom]\n    , both : false // [true, false]\n  }\n}\n`````\n\n### startIdx\n````js\nlet startIdx = 1; //start idx 1\n`````\n## Development - 뿅\n\nuse create-react-app\n\n```\nnpm install create-react-app\ncreate-react-app yourApp\nnpm start\n```\n\n## Example - 예시에요\n\n`npm start` and then go to `http://localhost:3000/`\n\n\n## License - 퍼가요~♥\n\n`rc-timeline-carousel` is released under the MIT license.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimyongyook%2Freact-timeline-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimyongyook%2Freact-timeline-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimyongyook%2Freact-timeline-carousel/lists"}