diff --git a/.babelrc b/.babelrc index 9bd7508..3d03c6e 100644 --- a/.babelrc +++ b/.babelrc @@ -5,6 +5,7 @@ { "useBuiltIns": "usage", "modules": false, + "corejs": 3, "targets": "> 0.25%, not dead" } ], @@ -12,7 +13,6 @@ "@babel/preset-typescript" ], "plugins": [ - "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ], "ignore": ["node_modules/**"] diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index f693d5f..0000000 --- a/.editorconfig +++ /dev/null @@ -1,13 +0,0 @@ -root = true - -[*] -charset = utf-8 -end_of_line = lf -indent_size = 2 -indent_style = space -insert_final_newline = true -trim_trailing_whitespace = true - -[*.md] -max_line_length = 0 -trim_trailing_whitespace = false diff --git a/.prettierignore b/.prettierignore index 8b7ddbb..5ab1d28 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,7 +1,4 @@ dist -src -example -webpack.config.js +example/index.js *.json -*.md .babelrc \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 53b79b5..8424f8c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,7 @@ { "tabWidth": 2, "singleQuote": true, - "printWidth": 120, + "printWidth": 150, "bracketSpacing": true, "jsxBracketSameLine": true, "useTabs": false, diff --git a/README.md b/README.md index 0be02ad..2a3d281 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,10 @@ # react-simple-image-slider + [![ReactJs][react-image]][react-url] [![Download Count][download-image]][download-url] [![GitHub license][license-image]][license-url] -[react-image]: https://img.shields.io/badge/ReactJS-%5E16.4.2-blue.svg +[react-image]: https://img.shields.io/badge/ReactJS-%5E16.13.1-blue.svg [react-url]: https://reactjs.org [download-image]: http://img.shields.io/npm/dm/react-simple-image-slider.svg?style=flat [download-url]: http://www.npmjs.com/package/react-simple-image-slider @@ -11,17 +12,19 @@ [license-url]: https://github.com/kimcoder/react-simple-image-slider/blob/master/LICENSE Simple ImageSlider Component for ReactJS v16.13
+ - Just Two Elements will be used. (for display images) -- Support GPU Render, by default. +- Support GPU Render, by default. - Support Image Preload. - Selectable Navgation Styles. -# Live demo -- Go to Site

-![demo gif](https://github.com/kimcoder/react-simple-image-slider/raw/master/demo.gif) +# Live demo +- Go to Site

+ ![demo gif](https://github.com/kimcoder/react-simple-image-slider/raw/master/demo.gif) # Install + ``` // npm npm install react-simple-image-slider --save @@ -31,69 +34,74 @@ yarn add react-simple-image-slider ``` # Usage + ``` import SimpleImageSlider from "react-simple-image-slider"; -class App extends React.Component { - render() { - const images = [ - { url: "images/1.jpg" }, - { url: "images/2.jpg" }, - { url: "images/3.jpg" }, - { url: "images/4.jpg" }, - { url: "images/5.jpg" }, - { url: "images/6.jpg" }, - { url: "images/7.jpg" }, - ]; - - return ( -
- -
- ); - } +const images = [ + { url: "images/1.jpg" }, + { url: "images/2.jpg" }, + { url: "images/3.jpg" }, + { url: "images/4.jpg" }, + { url: "images/5.jpg" }, + { url: "images/6.jpg" }, + { url: "images/7.jpg" }, +]; + +const App = () => { + return ( +
+ +
+ ); } ``` + If You want to see more detail source,
-- [`example/App.jsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.jsx)
+ +- [`example/App.tsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.tsx)
# Props -|Name|Type|Required|Description|Default| -|:--:|:--:|:-----:|:----------|:------| -|**width**|`Number`|`Required`|Image Slider Width|| -|**height**|`Number`|`Required`|Image Slider Height|| -|**images**|`Array`|`Required`|Images,
Array Elements should be like this structure,
{ url: "" }|| -|**style**|`String`|`Optional`|css object|| -|**slideDuration**|`Number`|`Optional`|css transition-duration property|`0.5`| -|**navStyle**|`Number`|`Optional`|Arrow Navgation Style,
1 or 2|`1`| -|**showNavs**|`Boolean`|`Optional`|Toggle Arrow Navgation|`true`| -|**showBullets**|`Boolean`|`Optional`|Toggle Bullets|`true`| -|**useGPURender**|`Boolean`|`Optional`|Toggle GPU Render|`true`| -|**bgColor**|`String`|`Optional`|slider container's css background-color property|`#000000`| -|**onClick**|`Function`|`Optional`|Image Click Callback function,
`onClick = (idx, event) => { }`
idx : number : clicked bullet index (begin from 0)|| -|**onClickNav**|`Function`|`Optional`|Arrow Navigation Callback function,
`onClickNav = (toRight) => { }`
toRight : Boolean : slide direction|| -|**onClickBullets**|`Function`|`Optional`|Bullets Callback function,
`onClickBullets = (idx) => { }`
idx : Number : clicked bullet index (begin from 0)|| -|**onStartSlide**|`Function`|`Optional`|Slide Transition Start function,
`onStartSlide = (idx, length) => { }`
idx : Number : start index (begin from 1)
length : Number : image length|| -|**onCompleteSlide**|`Function`|`Optional`|Slide TransitionEnd Callback function,
`onCompleteSlide = (idx, length) => { }`
idx : Number : start index (begin from 1)
length : Number : image length|| + +| Name | Type | Required | Description | Default | +| :-----------------: | :--------: | :--------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------- | +| **width** | `Number` | `Required` | Image Slider Width | | +| **height** | `Number` | `Required` | Image Slider Height | | +| **images** | `Array` | `Required` | Images,
Array Elements should be like this structure,
{ url: "" } | | +| **style** | `String` | `Optional` | css object | | +| **slideDuration** | `Number` | `Optional` | css transition-duration property | `0.5` | +| **navStyle** | `Number` | `Optional` | Arrow Navgation Style,
1 or 2 | `1` | +| **showNavs** | `Boolean` | `Optional` | Toggle Arrow Navgation | `true` | +| **showBullets** | `Boolean` | `Optional` | Toggle Bullets | `true` | +| **useGPURender** | `Boolean` | `Optional` | Toggle GPU Render | `true` | +| **bgColor** | `String` | `Optional` | slider container's css background-color property | `#000000` | +| **onClick** | `Function` | `Optional` | Image Click Callback function,
`onClick = (idx, event) => { }`
idx : number : clicked bullet index (begin from 0) | | +| **onClickNav** | `Function` | `Optional` | Arrow Navigation Callback function,
`onClickNav = (toRight) => { }`
toRight : Boolean : slide direction | | +| **onClickBullets** | `Function` | `Optional` | Bullets Callback function,
`onClickBullets = (idx) => { }`
idx : Number : clicked bullet index (begin from 0) | | +| **onStartSlide** | `Function` | `Optional` | Slide Transition Start function,
`onStartSlide = (idx, length) => { }`
idx : Number : start index (begin from 1)
length : Number : image length | | +| **onCompleteSlide** | `Function` | `Optional` | Slide TransitionEnd Callback function,
`onCompleteSlide = (idx, length) => { }`
idx : Number : start index (begin from 1)
length : Number : image length | | If You want to see more detail,
-- [`src/ImageSliderPropTypes.js`](https://github.com/kimcoder/react-simple-image-slider/blob/master/src/ImageSliderPropTypes.js) -- [`example/app.jsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.jsx)
+ +- [`example/app.tsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.tsx)
# Development + ### directory & source -- ``./example/`` : demo site souce for testing component -- ``./src/`` : image slider component source -- ``./dist/`` : image slider component distribution -- ``./babelrc`` : babel configure. (version 7.x) -- ``./webpack.config.js`` : webpack configure. (version 4.x) -- ``./rollup.config.js`` : rollup configure. + +- `./example/` : demo site souce for testing component +- `./src/` : image slider component source +- `./dist/` : image slider component distribution +- `./babelrc` : babel configure. (version 7.x) +- `./webpack.config.js` : webpack configure. (version 4.x) +- `./rollup.config.js` : rollup configure. ### scripts + ``` // npm npm run example // run a test app(demo) by webpack dev server @@ -105,10 +113,12 @@ yarn example yarn build yarn build:watch ``` + If you want to run a test app, should build before do that.
After run example by webpack dev server,
-open ``http://localhost:8080/`` in a browser
+open `http://localhost:8080/` in a browser
# License -MIT \ No newline at end of file + +MIT diff --git a/example/App.jsx b/example/App.jsx deleted file mode 100644 index 558a796..0000000 --- a/example/App.jsx +++ /dev/null @@ -1,165 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import CssBaseline from "@material-ui/core/CssBaseline"; -import AppBar from "@material-ui/core/AppBar"; -import List from "@material-ui/core/List"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemText from "@material-ui/core/ListItemText"; -import ListSubheader from "@material-ui/core/ListSubheader"; -import Checkbox from "@material-ui/core/Checkbox"; -import FormControl from "@material-ui/core/FormControl"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import Select from "@material-ui/core/Select"; -import SimpleImageSlider from ".."; - -class App extends React.Component { - listSubHeader =

Slider Settings

; - toggleOptions = ["useGPURender", "showNavs", "showBullets"]; - - images = [ - { url: "images/1.jpg" }, - { url: "images/2.jpg" }, - { url: "images/3.jpg" }, - { url: "images/4.jpg" }, - { url: "images/5.jpg" }, - { url: "images/6.jpg" }, - { url: "images/7.jpg" }, - ]; - - constructor() { - super(); - this.state = { - useGPURender: true, - showNavs: true, - showBullets: true, - navStyle: 1, - slideDuration: 0.5, - bgColor: "#000000", - slideIndexText: "", - }; - } - - componentDidMount() { - console.log("[App componentDidMount]"); - } - - componentDidUpdate(prevProps, prevState, snapshot) { - console.log("[App componentDidUpdate]"); - } - - onClick = (idx, event) => { - console.log(`[App onClick] ${idx} ${event.target}`); - } - - onClickNav = (toRight) => { - console.log(`[App onClickNav] ${toRight}`); - } - - onClickBullets = (idx) => { - console.log(`[App onClickBullets] ${idx}`); - } - - onStartSlide = (idx, length) => { - console.log(`[App onStartSlide] ${idx}/${length}`); - this.setState({ slideIndexText: `${idx} / ${length}`}); - } - - onCompleteSlide = (idx, length) => { - console.log(`[App onCompleteSlide] ${idx}/${length}`); - this.setState({ slideIndexText: `${idx} / ${length}`}); - } - - onToggleOptions = value => () => { - console.log(`[App onToggleOptions] ${value}`); - const updateValue = !this.state[value]; - this.setState({ [value]: updateValue }); - } - - onChangeSelect = event => this.setState({ [event.target.name]: event.target.value }); - - render() { - const slideText = this.state.slideIndexText || `${1} / ${this.images.length}`; - - return ( -
- - -

React Simple Image Slider Example

-

simple image slider component for react

-
-