Skip to content

Commit 870bd22

Browse files
ryanhefnerryanhefner
committed
Initial commit
1 parent df67382 commit 870bd22

File tree

15 files changed

+3834
-0
lines changed

15 files changed

+3834
-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+
npm-debug.log
6+
yarn-error.log
7+
/*.js
8+
!rollup.config.js
9+
*.sublime-project
10+
*.sublime-workspace

‎.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: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
# 📖 react-paging-indicators
2+
3+
Library of React paging indicator components that work well for carousels,
4+
rotators, slideshows or whatever else you could use a simple paging component for.
5+
6+
## Install
7+
8+
Via [npm](https://npmjs.com/package/react-paging-indicators):
9+
10+
```sh
11+
npm install --save react-paging-indicators
12+
```
13+
14+
Via [Yarn](https://yarn.fyi/react-paging-indicators):
15+
16+
```sh
17+
yarn add react-paging-indicators
18+
```
19+
20+
## How to use
21+
22+
This library includes a few different components to offer you the flexibility you
23+
need for the task at hand.
24+
25+
* [pagingIndicator (HOC)](#pagingindicator-hoc) - Higher order component that all the other components are wrapped in.
26+
* [CustomIndicator](#customindicator) - Generic paging indicator component that accepts a custom indictor to display paging/progress status.
27+
* [BarsIndicator](#barsindicator) - Simple paging indicator that uses a [BarIndicator]() component to display index/progress.
28+
* [DotsIndicator](#dotsindicator) - Simple paging indicator that uses a [CircleIndicator]() component to display index/progress.
29+
30+
### pagingIndicator (HOC)
31+
32+
Higher order component that handles all of the core functionality for the paging
33+
indicators, maintaining the state of the current `index`, basic `onClick` handling
34+
for the indicators and setup/management of the `Timer` element, if supplied.
35+
36+
#### Properties
37+
38+
* `index:Number` - Index of the active indicator. (Default: `0`)
39+
40+
* `length:Number` - Number of indicators to render. (Default: `1`)
41+
42+
* `renderIndicators:Function` - Function that takes an object and allows you to customize how
43+
the indicators are created.
44+
45+
Default:
46+
47+
```js
48+
const renderIndicators = function ({indicator, index = 0, keyPrefix = 'keyPrefix-', length = 0, onIndicatorClick = () => {}, progress = 1}) {
49+
const indicators = [];
50+
51+
if (!indicator) {
52+
return indicators;
53+
}
54+
55+
let i = 0;
56+
while (i < length) {
57+
indicators.push(
58+
React.cloneElement(indicator, {
59+
key: `${keyPrefix}-item-${i}`,
60+
progress: (i === index) ? progress : 0,
61+
onClick: onIndicatorClick.bind(this, i),
62+
})
63+
);
64+
};
65+
66+
return indicators;
67+
};
68+
```
69+
70+
* `timer:Element` - A `Timer`, ([react-timer-wrapper](https://npmjs.com/packages/react-timer-wrapper)),
71+
instance that is used to progress the indicator index.
72+
73+
* `onChange:Function` - Callback fired whenever the `index` is changed, either via
74+
a click handler or when a `Timer` progresses the `index`. (Default: `(index) => {}`)
75+
76+
#### Example
77+
78+
```js
79+
import React, {PureComponent} from 'react';
80+
import {pagingIndicator} from 'react-paging-indicators';
81+
82+
class CustomPagingIndicator extends PureComponent {
83+
84+
...
85+
86+
}
87+
88+
export default pagingIndicator(CustomPagingIndicator);
89+
90+
```
91+
92+
### CustomIndicator
93+
94+
Instead of using the `pagingIndicator` (HOC) to develop a custom pager, you can also use the
95+
`CustomIndicator` if all you want to change is the `indicator` element that is
96+
rendered for your pager.
97+
98+
#### Properties _(Supports all props supported by `pagingIndicator` with the addition of...)_
99+
100+
* `indicator:Element` - An indicator element to represent each index, with the option
101+
of showing `Timer` progress if available. Works well with, [react-indicators](https://npmjs.com/packages/react-indicators).
102+
103+
#### Example
104+
105+
```js
106+
import React, {Component} from 'react';
107+
import Rotator from 'react-rotator';
108+
import {CustomIndicator} from 'react-paging-indicators';
109+
import FeatureCard from './FeatureCard';
110+
import YourCustomIndicator from './YourCustomIndicator';
111+
112+
class SomethingWithPaging extends Component {
113+
render() {
114+
return (
115+
<Rotator
116+
indicator={(
117+
<CustomIndicator indicator={<YourCustomIndicator />} />
118+
)}
119+
>
120+
<FeatureCard>
121+
<h2>Feature #1</h2>
122+
</Feature>
123+
<FeatureCard>
124+
<h2>Feature #2</h2>
125+
</FeatureCard>
126+
</Rotator>
127+
);
128+
}
129+
}
130+
```
131+
132+
### BarsIndicator
133+
134+
Component that uses a [`BarIndicator`](https://github.com/ryanhefner/react-indicators#barindicator-)
135+
to represent a paging indicator and optional timing progress.
136+
137+
#### Properties
138+
139+
* `indicatorClassName:String` - Class applied to the indicator items when rendered.
140+
141+
* `renderIndicators:Function` - Function that allows you to override the default
142+
`renderIndicators` method.
143+
144+
* Along with all properties available for the [BarIndicator](https://github.com/ryanhefner/react-indicators#barindicator-),
145+
except for `progress`, which is supplied via the optional `Timer`.
146+
147+
#### Example
148+
149+
```js
150+
import React, {Component} from 'react';
151+
import Rotator from 'react-rotator';
152+
import {BarsIndicator} from 'react-paging-indicators';
153+
import FeatureCard from './FeatureCard';
154+
155+
class SomethingWithPaging extends Component {
156+
render() {
157+
return (
158+
<Rotator
159+
indicator={(
160+
<BarsIndicator color="red" />
161+
)}
162+
>
163+
<FeatureCard>
164+
<h2>Feature #1</h2>
165+
</Feature>
166+
<FeatureCard>
167+
<h2>Feature #2</h2>
168+
</FeatureCard>
169+
</Rotator>
170+
);
171+
}
172+
}
173+
```
174+
175+
#### Exampel w/ `Timer`
176+
177+
```js
178+
import React, {Component} from 'react';
179+
import Rotator from 'react-rotator';
180+
import Timer from 'react-timer-wrapper';
181+
import {BarsIndicator} from 'react-paging-indicators';
182+
import FeatureCard from './FeatureCard';
183+
184+
class SomethingWithPaging extends Component {
185+
render() {
186+
return (
187+
<Rotator
188+
indicator={(
189+
<BarsIndicator timer={<Timer duration={5000} />} color="red" />
190+
)}
191+
>
192+
<FeatureCard>
193+
<h2>Feature #1</h2>
194+
</Feature>
195+
<FeatureCard>
196+
<h2>Feature #2</h2>
197+
</FeatureCard>
198+
</Rotator>
199+
);
200+
}
201+
}
202+
```
203+
204+
More information about the `Timer` and its available options can be found on GitHub,
205+
[`react-timer-wrapper`](https://github.com/ryanhefner/react-timer-wrapper).
206+
207+
### DotsPager
208+
209+
Component that uses a [`CircleIndicator`](https://github.com/ryanhefner/react-indicators#circleindicator-)
210+
to represent a paging indicator and optional timing progress.
211+
212+
#### Properties
213+
214+
* `indicatorClassName:String` - Class applied to the indicator items when rendered.
215+
216+
* `renderIndicators:Function` - Function that allows you to override the default
217+
`renderIndicators` method.
218+
219+
* Along with all properties available for the [CircleIndicator](https://github.com/ryanhefner/react-indicators#circleindicator-),
220+
except for `progress`, which is supplied via the optional `Timer`.
221+
222+
#### Example
223+
224+
```js
225+
import React, {Component} from 'react';
226+
import Rotator from 'react-rotator';
227+
import {DotsIndicator} from 'react-paging-indicators';
228+
import FeatureCard from './FeatureCard';
229+
230+
class SomethingWithPaging extends Component {
231+
render() {
232+
return (
233+
<Rotator
234+
indicator={(
235+
<DotsIndicator fillColor="red" />
236+
)}
237+
>
238+
<FeatureCard>
239+
<h2>Feature #1</h2>
240+
</Feature>
241+
<FeatureCard>
242+
<h2>Feature #2</h2>
243+
</FeatureCard>
244+
</Rotator>
245+
);
246+
}
247+
}
248+
```
249+
250+
## Pairs well with...
251+
252+
* [react-indicators](https://github.com/ryanhefner/react-indicators)
253+
* [react-rotator](https://github.com/ryanhefner/react-rotator)
254+
* [react-timer-wrapper](https://github.com/ryanhefner/react-timer-wrapper)
255+
256+
## License
257+
258+
[MIT](LICENSE)

‎package.json‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{
2+
"name": "react-paging-indicators",
3+
"version": "0.1.0",
4+
"license": "MIT",
5+
"description": "Generic React paging indicators that you can use in carousels, rotators, slideshows and more!",
6+
"repository": "ryanhefner/react-paging-indicators",
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 -f BarsIndicator.js && rm -f CustomIndicator.js && rm -f DotsIndicator.js && rm -f pagingIndicator.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+
"lodash.omit": "^4.5.0",
35+
"prop-types": "^15.5.10",
36+
"react-indicators": "^0.2.2",
37+
"react-timer-wrapper": "^0.1.1"
38+
},
39+
"devDependencies": {
40+
"babel-cli": "^6.24.1",
41+
"babel-plugin-dev-expression": "^0.2.1",
42+
"babel-plugin-external-helpers": "^6.22.0",
43+
"babel-plugin-transform-react-remove-prop-types": "^0.4.6",
44+
"babel-preset-latest": "^6.24.1",
45+
"babel-preset-react": "^6.24.1",
46+
"gzip-size": "^3.0.0",
47+
"jest": "^20.0.4",
48+
"pretty-bytes": "^4.0.2",
49+
"react": "^15.6.1",
50+
"rimraf": "^2.6.1",
51+
"rollup": "^0.45.2",
52+
"rollup-plugin-babel": "^2.7.1",
53+
"rollup-plugin-commonjs": "^8.0.2",
54+
"rollup-plugin-json": "^2.3.0",
55+
"rollup-plugin-node-resolve": "^3.0.0",
56+
"rollup-plugin-uglify": "^2.0.1",
57+
"rollup-watch": "^4.3.1"
58+
},
59+
"browserify": {
60+
"transform": [
61+
"loose-envify"
62+
]
63+
},
64+
"keywords": [
65+
"react",
66+
"react-component",
67+
"indicators",
68+
"paging",
69+
"pagination",
70+
"carousel",
71+
"rotator",
72+
"slideshow",
73+
"react-indicators",
74+
"react-rotator",
75+
"react-timer-wrapper"
76+
]
77+
}

0 commit comments

Comments
 (0)