Skip to content

Commit 75c85dd

Browse files
kimcoderkimcoder
committed
first commit
0 parents  commit 75c85dd

13 files changed

+12159
-0
lines changed

Diff for: ‎.babelrc

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"presets": [
3+
["@babel/preset-env", {
4+
"loose": true,
5+
"modules": false,
6+
"targets": "> 0.25%, not dead"
7+
}],
8+
"@babel/preset-react",
9+
"@babel/preset-typescript"
10+
],
11+
"plugins": [
12+
"@babel/plugin-transform-runtime",
13+
"@babel/plugin-proposal-class-properties"
14+
],
15+
"ignore": [
16+
"node_modules"
17+
]
18+
}

Diff for: ‎.npmignore

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.DS_Store
2+
.vscode
3+
.git*
4+
5+
example
6+
node_modules
7+
npm-debug.log
8+
yarn-debug.log
9+
yarn-error.log

Diff for: ‎.storybook/addons.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@storybook/addon-links/register';

Diff for: ‎.storybook/config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { configure } from '@storybook/react';
2+
import { addDecorator, addParameters } from '@storybook/react';
3+
import { withInfo } from '@storybook/addon-info';
4+
5+
addDecorator(withInfo);
6+
addParameters({ info: { inline: true } });
7+
configure(require.context('../example', true, /\.story\.tsx$/), module);

Diff for: ‎.storybook/webpack.config.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const path = require('path');
2+
const urlLoaderSizeLimit = 8 * 1024;
3+
4+
module.exports = {
5+
module: {
6+
rules: [
7+
{
8+
test: /\.tsx?$/,
9+
include: path.resolve(__dirname, "../"),
10+
use: [
11+
require.resolve("ts-loader")
12+
]
13+
},
14+
{
15+
test: /\.css$/,
16+
use: [
17+
{ loader: 'style-loader' },
18+
{ loader: 'css-loader' }
19+
]
20+
},
21+
{
22+
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf)$/,
23+
use: [
24+
{
25+
loader: 'url-loader',
26+
options: {
27+
limit: urlLoaderSizeLimit
28+
}
29+
}
30+
]
31+
}
32+
],
33+
},
34+
resolve: {
35+
extensions: ['.ts', '.tsx'],
36+
plugins: [
37+
]
38+
}
39+
};

Diff for: ‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Change Log
2+
3+
1.0.0 (September 7, 2020)
4+
- initial setup for development environment.
5+
- config rollup for making react component.
6+
- config webpack for local testing.

Diff for: ‎README.md

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
# react-simple-image-slider
2+
[![ReactJs][react-image]][react-url]
3+
[![Download Count][download-image]][download-url]
4+
[![GitHub license][license-image]][license-url]
5+
6+
[react-image]: https://img.shields.io/badge/ReactJS-%5E16.4.2-blue.svg
7+
[react-url]: https://reactjs.org
8+
[download-image]: http://img.shields.io/npm/dm/react-simple-image-slider.svg?style=flat
9+
[download-url]: http://www.npmjs.com/package/react-simple-image-slider
10+
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg
11+
[license-url]: https://github.com/kimcoder/react-simple-image-slider/blob/master/LICENSE
12+
13+
Simple ImageSlider Component for ReactJS v16.0<br>
14+
- Just Two Elements will be used. (for display images)
15+
- Support GPU Render, by default.
16+
- Support Image Preload.
17+
- Selectable Navgation Styles.
18+
19+
# Live demo
20+
- <a href="https://kimcoder.github.io/demo/react-simple-image-slider/" target="_blank">Go to Site</a><br><br>
21+
![demo gif](https://github.com/kimcoder/react-simple-image-slider/raw/master/demo.gif)
22+
23+
24+
# Install
25+
```
26+
// npm
27+
npm install react-simple-image-slider --save
28+
29+
// yarn
30+
yarn add react-simple-image-slider
31+
```
32+
33+
# Usage
34+
```
35+
import SimpleImageSlider from "react-simple-image-slider";
36+
37+
class App extends React.Component {
38+
render() {
39+
const images = [
40+
{ url: "images/1.jpg" },
41+
{ url: "images/2.jpg" },
42+
{ url: "images/3.jpg" },
43+
{ url: "images/4.jpg" },
44+
{ url: "images/5.jpg" },
45+
{ url: "images/6.jpg" },
46+
{ url: "images/7.jpg" },
47+
];
48+
49+
return (
50+
<div>
51+
<SimpleImageSlider
52+
width={896}
53+
height={504}
54+
images={images}
55+
/>
56+
</div>
57+
);
58+
}
59+
}
60+
```
61+
If You want to see more detail source,<br>
62+
- [`example/App.jsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.jsx)<br>
63+
64+
# Props
65+
|Name|Type|Required|Description|Default|
66+
|:--:|:--:|:-----:|:----------|:------|
67+
|**width**|`Number`|`Required`|Image Slider Width||
68+
|**height**|`Number`|`Required`|Image Slider Height||
69+
|**images**|`Array`|`Required`|Images,<br>Array Elements should be like this structure,<br>{ url: "" }||
70+
|**style**|`String`|`Optional`|css object||
71+
|**slideDuration**|`Number`|`Optional`|css transition-duration property|`0.5`|
72+
|**navStyle**|`Number`|`Optional`|Arrow Navgation Style,<br>1 or 2|`1`|
73+
|**showNavs**|`Boolean`|`Optional`|Toggle Arrow Navgation|`true`|
74+
|**showBullets**|`Boolean`|`Optional`|Toggle Bullets|`true`|
75+
|**useGPURender**|`Boolean`|`Optional`|Toggle GPU Render|`true`|
76+
|**bgColor**|`String`|`Optional`|slider container's css background-color property|`#000000`|
77+
|**onClickNav**|`Function`|`Optional`|Arrow Navigation Callback function,<br>`onClickNav = (toRight) => { }`<br>toRight : Boolean : slide direction||
78+
|**onClickBullets**|`Function`|`Optional`|Bullets Callback function,<br>`onClickBullets = (idx) => { }`<br>idx : Number : clicked bullet index (begin from 0)||
79+
|**onStartSlide**|`Function`|`Optional`|Slide Transition Start function,<br>`onStartSlide = (idx, length) => { }`<br>idx : Number : start index (begin from 1)<br>length : Number : image length||
80+
|**onCompleteSlide**|`Function`|`Optional`|Slide TransitionEnd Callback function,<br>`onCompleteSlide = (idx, length) => { }`<br>idx : Number : start index (begin from 1)<br>length : Number : image length||
81+
82+
If You want to see more detail,<br>
83+
- [`src/ImageSliderPropTypes.js`](https://github.com/kimcoder/react-simple-image-slider/blob/master/src/ImageSliderPropTypes.js)
84+
- [`example/app.jsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.jsx)<br>
85+
86+
# Development
87+
### directory & source
88+
- ``./example/`` : demo site souce for testing component
89+
- ``./src/`` : image slider component source
90+
- ``./dist/`` : image slider component distribution
91+
- ``./babelrc`` : babel configure. (version 7.x)
92+
- ``./webpack.config.js`` : webpack configure. (version 4.x)
93+
- ``./rollup.config.js`` : rollup configure.
94+
95+
### scripts
96+
```
97+
// npm
98+
npm run example // run a test app(demo) by webpack dev server
99+
npm run build // build the image slider component by rollup
100+
npm run build:watch // build watch mode
101+
102+
// yarn
103+
yarn example
104+
yarn build
105+
yarn buidl:watch
106+
```
107+
If you want to run a test app, should build before do that.<br>
108+
109+
After run example by webpack dev server,<br>
110+
open ``http://localhost:8080/`` in a browser<br>
111+
112+
# License
113+
MIT

0 commit comments

Comments
 (0)