Skip to content

Commit d393bf8

Browse files
ryanhefnerryanhefner
committed
Merge branch 'release/0.1.0'
2 parents 4ba16be + ab0d9aa commit d393bf8

File tree

11 files changed

+3446
-0
lines changed

11 files changed

+3446
-0
lines changed

‎.gitignore

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.DS_Store
2+
es
3+
node_modules
4+
umd
5+
/*.js
6+
npm-debug.log
7+
yarn-error.log
8+
*.sublime-project
9+
*.sublime-workspace
10+
!rollup.config.js

‎.npmignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
tools
2+
rollup.config.js
3+
*.sublime-project
4+
*.sublime-workspace

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Ryan Hefner <hi@ryanhefner.com> (https://www.ryanhefner.com)
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# 🎠 react-rotator
2+
3+
Flexible React component for composing rotators, carousels, slideshows and more.
4+
5+
## Install
6+
7+
Via [npm](https://npmjs.com/package/react-rotator):
8+
```
9+
npm install --save react-rotator
10+
```
11+
12+
Via [Yarn](https://yarn.fyi/react-rotator):
13+
```
14+
yarn add react-rotator
15+
```
16+
17+
## How to use
18+
19+
The `Rotator` is built with the intention of offering a truly flexible system for
20+
building rotators, carousels, slideshows, etc. with a simplified interface for
21+
managing various ways that these components can exist.
22+
23+
### Properties
24+
25+
* `index:Number` - Index of the currently active child.
26+
* `onChange:Function` - Callback for when the index is changed internally, either
27+
via a child or indicator.
28+
29+
### Children & Indicators
30+
31+
Each child within a `<Rotator />` instance has properties applied that allow
32+
them to manage their own behavior based on those props. Along with callbacks that
33+
can be passed in to control the rotator’s behavior.
34+
35+
In addition to the `[children]`, an optional `indicator` component can be passed
36+
in via props that will be rendered alongside the `<Rotator />`’s children, which
37+
allows for displaying indicators on progress, or building pagination controls for
38+
the `<Rotator />`.
39+
40+
Here’s a breakdown of how `[children]` and an `indicator` is managed by the
41+
component.
42+
43+
#### Children
44+
45+
The goal is to allow for maximum flexibility through composition. Feel free to
46+
set whatever props your components need, but the following properties will be
47+
applied/overwritten by the `<Rotator />` when rendered to the page.
48+
49+
##### Properties
50+
51+
* `index:Number` - Index of the child amongst the other children they are rendered with.
52+
* `numChildren:Number` - Number of relative children that are being rendered with this child.
53+
* `position:Number` - Position of the child in relation the the current `index` set on the `<Rotator />`.
54+
55+
>* If the `position` is `0`, it could be assumed that this is the “active” child.
56+
>* If the `position` is `<0`, the child is positioned before the current “active” child.
57+
>* If the `position` is `>0`, the child is positioned after the current “active” child.
58+
59+
* `onActive:Function` - Callback that could be triggered by the child when the child becomes "active".
60+
This could have different meanings depending on the child, but `onActive` will
61+
update the `<Rotator />` to set that child at position `0`.
62+
* `onFinish:Function` - Callback that could be triggered by the child, in the event that the child is
63+
managing it’s status or responsible for initiating progression within the `<Rotator />`.
64+
65+
##### Example
66+
67+
```
68+
import Rotator from 'react-rotator';
69+
70+
...
71+
72+
render() {
73+
return (
74+
<Rotator>
75+
76+
</Rotator>
77+
);
78+
}
79+
80+
...
81+
82+
```
83+
84+
#### Indicator
85+
86+
An indicator component can be composed within the `<Rotator />` via the `indicator` prop.
87+
This makes it really easy to pass in a component that will reflect the current status
88+
of the rotator, while also allowing for callbacks to be called to control the
89+
state of the rotator.
90+
91+
You can make your own paging indicators, or I’ve created a companion package that contains
92+
some common paging indicator components that you can use, [react-paging-indicators](https://github.com/ryanhefner/react-paging-indicators).
93+
94+
##### Properties
95+
96+
* `index:Number` - Index of the currently selected child.
97+
* `onChange:Function` - Callback for when the indicator changes, passing its
98+
`index` to set the new `index` state in the `<Rotator />`.
99+
100+
##### Example
101+
102+
```
103+
import Rotator from 'react-rotator';
104+
import {DotsIndicator} from 'react-paging-indicators';
105+
106+
...
107+
108+
render() {
109+
return (
110+
<Rotator
111+
indicator={<DotsIndicator />}
112+
>
113+
114+
</Rotator>
115+
);
116+
}
117+
118+
...
119+
120+
```
121+
122+
## License
123+
124+
[MIT](LICENSE)

‎package.json

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"name": "react-rotator",
3+
"version": "0.1.0",
4+
"license": "MIT",
5+
"description": "Flexible React component for composing rotators, carousels, slideshows and more.",
6+
"repository": "ryanhefner/react-rotator",
7+
"author": "Ryan Hefner <hi@ryanhefner.com> (https://www.ryanhefner.com)",
8+
"files": [
9+
"index.js",
10+
"es",
11+
"umd"
12+
],
13+
"directories": {
14+
"lib": "/src"
15+
},
16+
"main": "index.js",
17+
"module": "es/index.js",
18+
"jsnext:main": "src/index.js",
19+
"scripts": {
20+
"clean": "rm -f index.js && rm -rf es && rm -rf umd",
21+
"prebuild": "npm run clean",
22+
"build": "node ./tools/build.js",
23+
"watch": "babel ./src -d . --ignore __tests__ --watch",
24+
"prepare": "npm run build",
25+
"prepublishOnly": "node ./tools/build.js",
26+
"push-release": "git push origin master && git push --tags",
27+
"test": "echo \"Error: no test specified\" && exit 1"
28+
},
29+
"peerDependencies": {
30+
"react": ">=15"
31+
},
32+
"dependencies": {
33+
"clean-react-props": "^0.1.1",
34+
"prop-types": "^15.5.10"
35+
},
36+
"devDependencies": {
37+
"babel-cli": "^6.24.1",
38+
"babel-plugin-dev-expression": "^0.2.1",
39+
"babel-plugin-external-helpers": "^6.22.0",
40+
"babel-plugin-transform-react-remove-prop-types": "^0.4.6",
41+
"babel-preset-latest": "^6.24.1",
42+
"babel-preset-react": "^6.24.1",
43+
"gzip-size": "^3.0.0",
44+
"jest": "^20.0.4",
45+
"pretty-bytes": "^4.0.2",
46+
"react": "^15.6.1",
47+
"rimraf": "^2.6.1",
48+
"rollup": "^0.45.2",
49+
"rollup-plugin-babel": "^2.7.1",
50+
"rollup-plugin-commonjs": "^8.0.2",
51+
"rollup-plugin-json": "^2.3.0",
52+
"rollup-plugin-node-resolve": "^3.0.0",
53+
"rollup-plugin-uglify": "^2.0.1",
54+
"rollup-watch": "^4.3.1"
55+
},
56+
"browserify": {
57+
"transform": [
58+
"loose-envify"
59+
]
60+
},
61+
"keywords": [
62+
"react",
63+
"react-component",
64+
"rotator",
65+
"carousel",
66+
"slideshow",
67+
"composition"
68+
]
69+
}

‎rollup.config.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import babel from 'rollup-plugin-babel';
2+
import commonjs from 'rollup-plugin-commonjs';
3+
import json from 'rollup-plugin-json';
4+
import resolve from 'rollup-plugin-node-resolve';
5+
import uglify from 'rollup-plugin-uglify';
6+
import pkg from './package.json';
7+
8+
const config = {
9+
entry: 'src/index.js',
10+
format: 'umd',
11+
moduleName: 'react-rotator',
12+
plugins: [
13+
babel({
14+
exclude: 'node_modules/**',
15+
}),
16+
resolve(),
17+
commonjs({
18+
include: /node_modules/,
19+
}),
20+
json(),
21+
],
22+
external: [
23+
'react',
24+
],
25+
globals: {
26+
'react': 'React',
27+
},
28+
dest: './index.js',
29+
banner: `/*! ${pkg.name} v${pkg.version} | (c) ${new Date().getFullYear()} Ryan Hefner | ${pkg.license} License | https://github.com/${pkg.repository} !*/`,
30+
footer: '/* follow me on Twitter! @ryanhefner */',
31+
};
32+
33+
if (process.env.NODE_ENV === 'production') {
34+
config.plugins.push(uglify());
35+
}
36+
37+
export default config;

‎src/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": [ "../tools/babel-preset" ]
3+
}

0 commit comments

Comments
 (0)