├── .gitignore
├── .npmignore
├── .travis.yml
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
└── index.html
├── rollup.config.js
└── src
├── buttons.js
├── carousel.js
├── carousel.test.js
├── index.js
├── indicator-dots.js
└── keyboard-navigator.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 | /dist
12 |
13 | # misc
14 | .DS_Store
15 | .env
16 | npm-debug.log*
17 | yarn-debug.log*
18 | yarn-error.log*
19 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | !public
2 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | env:
3 | - CI=true
4 | node_js:
5 | - "6"
6 | before_script:
7 | - npm install react react-dom
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # re-carousel [![npm-version][npm-badge]][npm-link] [![size][size-src]][size-link]
2 |
3 | Minimal carousel component for React.
4 |
5 | demo: https://amio.github.io/re-carousel/
6 |
7 | ### Usage
8 |
9 | `import Carousel from 're-carousel'`
10 |
11 | then:
12 |
13 | ```jsx
14 |
15 | Frame 1
16 | Frame 2
17 | Frame 3
18 |
19 | ```
20 |
21 | ### Attributes
22 |
23 | All attributes are optional.
24 |
25 | - `axis` {Enum} `'x'` or `'y'` (`'x'` by default)
26 | - `loop` {Boolean} `true` or `false` (`false` by default) toggle loop mode.
27 | - `auto` {Boolean} `true` or `false` (`false` by default) toggle auto sliding.
28 | - `interval` {Number} (`4000`ms by default) interval for auto sliding.
29 | - `duration` {Number} (`300`ms by default) duration for animation.
30 | - `onTransitionEnd` {Function({ prev: HTMLElement, current: HTMLElement, next: HTMLElement})} on frames transition end callback.
31 | - `widgets` {Array of ReactClass} Indicator and switcher could be various,
32 | so it's not builtin. Here's some example custom widgets
33 | ([dots indicator](src/indicator-dots.js),
34 | [prev/next buttons](src/buttons.js), [keyboard navigation](src/keyboard-navigator)):
35 |
36 | ```javascript
37 | import Carousel from 're-carousel'
38 | import IndicatorDots from './indicator-dots'
39 | import Buttons from './buttons'
40 |
41 | export default function carousel () {
42 | return
43 | Frame 1
44 | Frame 2
45 | Frame 3
46 |
47 | }
48 | ```
49 | - `frames` {Array of ReactElement} If you want to create frames programmatically,
50 | use this attribute:
51 |
52 | ```javascript
53 | import Carousel from 're-carousel'
54 |
55 | export default function carousel (props) {
56 | const frames = props.frameArray.map((frame, i) => {
57 | return Frame {i}
58 | })
59 | return
60 | These children element will be appended to Carousel,
61 | as normal element other than "frame".
62 |
63 | }
64 | ```
65 | - `className` {String} Custom class name.
66 |
67 | ### Contributes
68 |
69 | ```bash
70 | npm run start # start local dev server
71 | npm run build # build lib
72 | npm run test # run tests
73 | ```
74 |
75 | ## License
76 |
77 | [MIT][mit] © [Amio][author]
78 |
79 | [npm-badge]: https://badgen.net/npm/v/re-carousel
80 | [npm-link]: https://www.npmjs.com/package/re-carousel
81 | [size-src]: https://badgen.net/bundlephobia/minzip/re-carousel
82 | [size-link]: https://bundlephobia.com/result?p=re-carousel
83 | [mit]: http://opensource.org/licenses/MIT
84 | [author]: http://github.com/amio
85 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "re-carousel",
3 | "version": "2.4.0",
4 | "description": "Minimal carousel component for React",
5 | "homepage": "https://amio.github.io/re-carousel",
6 | "repository": "amio/re-carousel",
7 | "license": "MIT",
8 | "main": "dist/carousel.js",
9 | "dependencies": {
10 | "prop-types": "^15.7.2"
11 | },
12 | "peerDependencies": {
13 | "react": "^15 || ^16",
14 | "react-dom": "^15 || ^16"
15 | },
16 | "devDependencies": {
17 | "cross-env": "^5.2.0",
18 | "push-dir": "^0.4.1",
19 | "react": "^16.8.6",
20 | "react-dom": "^16.8.6",
21 | "react-scripts": "^3.0.1",
22 | "rollup": "^1.0.0",
23 | "rollup-plugin-buble": "^0.19.8",
24 | "rollup-plugin-uglify": "^6.0.2"
25 | },
26 | "scripts": {
27 | "prepack": "npm run build",
28 | "build": "cross-env NODE_ENV=production && rollup -c",
29 | "start": "react-scripts start",
30 | "build-pages": "react-scripts build",
31 | "test:watch": "react-scripts test --env=jsdom",
32 | "test": "CI=true react-scripts test --env=jsdom",
33 | "eject": "react-scripts eject",
34 | "predeploy": "npm run build-pages",
35 | "deploy": "push-dir --dir=build --branch=gh-pages"
36 | },
37 | "files": [
38 | "dist/carousel.js"
39 | ],
40 | "browserslist": [
41 | ">0.2%",
42 | "not dead",
43 | "not ie <= 11",
44 | "not op_mini all"
45 | ]
46 | }
47 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amio/re-carousel/22be33389df3e58d433133aa284e90d3d24eab53/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | re-carousel: minimal carousel component for react.
8 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import buble from 'rollup-plugin-buble'
2 | import { uglify } from 'rollup-plugin-uglify'
3 |
4 | export default {
5 | input: 'src/carousel.js',
6 | output: {
7 | file: 'dist/carousel.js',
8 | format: 'cjs'
9 | },
10 | plugins: [ buble(), uglify() ],
11 | external: ['react', 'react-dom', 'prop-types']
12 | }
13 |
--------------------------------------------------------------------------------
/src/buttons.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import propTypes from 'prop-types'
3 |
4 | const styles = {
5 | wrapper: {
6 | position: 'absolute',
7 | width: '100%',
8 | zIndex: '100',
9 | bottom: '0',
10 | textAlign: 'center'
11 | },
12 | btn: {
13 | width: '30px',
14 | height: '30px',
15 | cursor: 'pointer',
16 | userSelect: 'none',
17 | position: 'absolute',
18 | bottom: '0',
19 | font: '16px/30px sans-serif',
20 | color: 'rgba(255,255,255,0.8)'
21 | },
22 | left: {
23 | left: '0'
24 | },
25 | right: {
26 | right: '0'
27 | }
28 | }
29 |
30 | export default function Buttons (props) {
31 | const prevBtnStyle = Object.assign({}, styles.btn, styles.left)
32 | const nextBtnStyle = Object.assign({}, styles.btn, styles.right)
33 | const { index, total, loop, prevHandler, nextHandler } = props
34 | return (
35 |
36 | { (loop || index !== 0) && (
37 |
◀
38 | )}
39 | { (loop || index !== total - 1) && (
40 |
▶
41 | )}
42 |
380 |
386 | {
387 | frames.map((frame, i) => {
388 | const frameStyle = objectAssign({zIndex: 99 - i}, styles.frame)
389 | return
{frame}
390 | })
391 | }
392 | { this.props.frames && this.props.children }
393 |
394 | {
395 | widgets && [].concat(widgets).map((Widget, i) => (
396 |
403 | ))
404 | }
405 |
FRAME 2
10 |
11 | ), div)
12 | })
13 |
14 | global.it('renders 2 frames without crashing', () => {
15 | const div = document.createElement('div')
16 | ReactDOM.render((
17 |
18 | FRAME 2
19 | FRAME 3
20 |
21 | ), div)
22 | })
23 |
24 | global.it('renders without crashing', () => {
25 | const div = document.createElement('div')
26 | ReactDOM.render((
27 |
28 | FRAME 1
29 | FRAME 2
30 | FRAME 3
31 |
32 | ), div)
33 | })
34 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import Carousel from './carousel'
4 | import Dots from './indicator-dots'
5 | import Buttons from './buttons'
6 |
7 | // Main App
8 | class App extends React.Component {
9 | constructor () {
10 | super()
11 | this.state = {
12 | axis: 'x'
13 | }
14 | this.setAxis = axis => {
15 | return () => this.setState({'axis': axis})
16 | }
17 | }
18 | render () {
19 | return (
20 |
21 |
22 | horizontal
24 | vertical
26 |
27 |
28 | FRAME 1
29 | FRAME 2
30 | FRAME 3
31 |
32 |
{
34 | Array.apply(null, Array(props.total)).map((x, i) => {
35 | return
36 | })
37 | }
38 | )
39 | }
40 | }
41 |
42 | IndicatorDots.propTypes = {
43 | index: PropTypes.number.isRequired,
44 | total: PropTypes.number.isRequired
45 | }
46 |
--------------------------------------------------------------------------------
/src/keyboard-navigator.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default class KeyboardNavigator extends React.Component {
4 | onKeydown = event => {
5 | const { prevHandler, nextHandler } = this.props
6 | switch (event.key) {
7 | case 'j':
8 | prevHandler()
9 | break;
10 | case 'k':
11 | nextHandler()
12 | break
13 | }
14 | }
15 |
16 | componentDidMount () {
17 | const { index, total, loop, prevHandler, nextHandler } = props
18 | window.addEventListener('keydown', this.onKeydown)
19 | }
20 |
21 | componentWillUnmount () {
22 | window.removeEventListener('keydown', this.onKeydown)
23 | }
24 |
25 | render () { return null }
26 | }
27 |
--------------------------------------------------------------------------------