├── .babelrc ├── .github └── workflows │ ├── build.yml │ └── release.yml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── cypress.config.ts ├── cypress └── e2e │ └── BackgroundSlider.cy.js ├── example ├── .gitignore ├── README.md ├── public │ ├── favicon.ico │ ├── favicon.png │ ├── index.html │ └── manifest.json └── src │ ├── App.js │ ├── Buttons.js │ ├── Card.js │ ├── Footer.js │ ├── UsageCard.js │ ├── assets │ ├── github.svg │ ├── image1.jpg │ ├── image2.jpg │ ├── image3.jpg │ ├── image4.jpg │ ├── image5.jpg │ ├── image6.jpg │ └── npm.svg │ ├── index.css │ ├── index.js │ └── logo.svg ├── index.d.ts ├── lib ├── BackgroundSlider.js ├── generateStyleSheet.js ├── index.js └── injectCss.js ├── package-lock.json ├── package.json ├── tsconfig.json ├── webpack.config.js ├── webpack.demo.config.ts └── webpack.lib.config.ts /.babelrc: -------------------------------------------------------------------------------- 1 | { "presets": ["@babel/react"] } 2 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | strategy: 11 | matrix: 12 | node-version: [18.x, 20.x, latest] 13 | 14 | steps: 15 | - uses: actions/checkout@v4 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v4 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | - name: npm install, build, and test 21 | run: | 22 | npm i 23 | npm run build 24 | npm test 25 | env: 26 | CI: true 27 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | release: 10 | runs-on: ubuntu-latest 11 | 12 | permissions: 13 | contents: write 14 | 15 | steps: 16 | - uses: actions/checkout@v4 17 | - name: Use Node.js 18 | uses: actions/setup-node@v4 19 | with: 20 | node-version: 20 21 | registry-url: https://registry.npmjs.org 22 | env: 23 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 24 | - name: npm build 🔧 25 | run: | 26 | npm i 27 | npm run build 28 | - name: Publish package on npm 29 | run: | 30 | npm publish 31 | env: 32 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 33 | - name: Build demo page 🔧 34 | run: npm run build:demo 35 | - name: Deploy Github Pages 🚀 36 | uses: JamesIves/github-pages-deploy-action@v4 37 | with: 38 | folder: dist-example 39 | 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # production 2 | /dist 3 | /dist-example 4 | 5 | # dependencies 6 | /node_modules 7 | 8 | # misc 9 | .DS_Store 10 | 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | cypress/videos 16 | cypress/screenshots -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | lib 2 | .babelrc 3 | .gitignore 4 | webpack.config.js 5 | example 6 | .github 7 | cypress.json 8 | cypress 9 | dist-example 10 | webpack.* 11 | tsconfig.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2018-present Demian Gemperli 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Background Slider 2 | 3 | [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![npm version](https://badge.fury.io/js/react-background-slider.svg)](https://www.npmjs.com/package/react-background-slider) 4 | 5 | Simply beautiful background image slider for React 🌅 6 | 7 | [️➡️ DEMO](https://u2ix.github.io/react-background-slider) 8 | 9 | ## Intro 10 | 11 | This component is meant to be used as a **full viewport background slideshow** that can easily add a slick, polished feel to pages that don't have much content. 12 | 13 | I've personally used it for several projects as the background for login / signup / dialog screens where the only content is a single foreground modal generally prompting the user for some info. 14 | 15 | ## Install 16 | 17 | ```bash 18 | # use npm 19 | npm install --save react-background-slider 20 | 21 | # use yarn 22 | yarn add react-background-slider 23 | ``` 24 | 25 | ## Usage 26 | 27 | ```javascript 28 | import BackgroundSlider from 'react-background-slider' 29 | 30 | 33 | ``` 34 | 35 | ## API 36 | 37 | ### BackgroundSlider 38 | 39 | - `props.images` - string[], *required* array of images to transition between. 40 | - `props.duration` - number, duration of which each image is displayed (default `10`) 41 | - `props.transition` - number, duration of the transition (default `2`) 42 | 43 | The component will start with the first image. 44 | 45 | ## [Demo](https://u2ix.github.io/react-background-slider) 46 | 47 | This repo comes with an example application under `example/` that can be run locally to experiment with the component. This demo is also hosted [here](https://u2ix.github.io/react-background-slider). 48 | 49 | **To launch the demo app** 50 | ```bash 51 | npm start 52 | ``` 53 | 54 | This will start the webpack dev server [locally on port 9000](http://localhost:9000). 55 | 56 | ## License 57 | 58 | MIT 59 | -------------------------------------------------------------------------------- /cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress' 2 | 3 | export default defineConfig({ 4 | video: false, 5 | e2e: { 6 | baseUrl: 'http://localhost:9000', 7 | supportFile: false, 8 | }, 9 | }) -------------------------------------------------------------------------------- /cypress/e2e/BackgroundSlider.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | context("BackgroundSlider", () => { 4 | beforeEach(() => { 5 | cy.visit("http://localhost:9000/", { 6 | onBeforeLoad (win) { 7 | cy.spy(win.console, 'warn').as('console.warn') 8 | } 9 | }); 10 | }); 11 | 12 | it("should render background images to the dom", () => { 13 | cy.get("#ReactBackgroundSlider") 14 | .get("figure") 15 | .should($figures => { 16 | expect($figures).to.have.length(6); 17 | }); 18 | }); 19 | 20 | it("should not log warning to console", () => { 21 | cy.get('@console.warn').should('not.be.called') 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | 4 | # testing 5 | /coverage 6 | 7 | # production 8 | /build 9 | 10 | # misc 11 | .DS_Store 12 | .env.local 13 | .env.development.local 14 | .env.test.local 15 | .env.production.local 16 | 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # React Background Slider Demo 2 | 3 | Demo of the [React Background Slider](https://github.com/u2ix/react-background-slider) 4 | 5 | ## Image Credits 6 | 7 | Photos on Unsplash by [Molly Martinez](https://unsplash.com/photos/88MqyyeY7Vw), 8 | [Jordan Whitt](https://unsplash.com/photos/keSFbPQAJRE), 9 | [Ethan Robertson](https://unsplash.com/photos/CcETP4gFBTU), 10 | [Amber Teasley](https://unsplash.com/photos/u0cSubf5F-E), 11 | [Heejing KIM](https://unsplash.com/photos/TqaFGqxiCQo) 12 | and [Rich Dahlgren](https://unsplash.com/photos/3OvE-4rgpTc) 13 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/u2ix/react-background-slider/bf8bea312cfbb114967f9f65745ea58d3427ab54/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/u2ix/react-background-slider/bf8bea312cfbb114967f9f65745ea58d3427ab54/example/public/favicon.png -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | React Background Slider Demo 10 | 11 | 12 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React Background Slider", 3 | "name": "Simply beautiful react background slideshow", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import BackgroundSlider from '../../lib/BackgroundSlider' 3 | 4 | import Card from './Card' 5 | import UsageCard from './UsageCard' 6 | import Footer from './Footer' 7 | 8 | import image1 from './assets/image1.jpg' 9 | import image2 from './assets/image2.jpg' 10 | import image3 from './assets/image3.jpg' 11 | import image4 from './assets/image4.jpg' 12 | import image5 from './assets/image5.jpg' 13 | import image6 from './assets/image6.jpg' 14 | 15 | const App = () => ( 16 |
17 |
18 | 19 |
20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 | 32 |
33 | ); 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /example/src/Buttons.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import github from './assets/github.svg' 4 | import npm from './assets/npm.svg' 5 | 6 | const Buttons = () => 7 |
8 | 9 | github Github 10 | 11 | 12 | npm npmjs 13 | 14 |
15 | 16 | export default Buttons 17 | -------------------------------------------------------------------------------- /example/src/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Buttons from './Buttons' 3 | 4 | const Card = () => 5 |
6 |
7 |

<React

8 |

<BackgroundSlider/>

9 |

<Simply beautiful background slideshow

10 | 11 |

Boost your website's appeal with a captivating image slideshow background. Engage visitors instantly, tell your story visually, and keep content fresh. Stand out, increase user interaction, and leave a lasting impression!

12 |
13 | 14 | 15 |
16 | 17 | export default Card 18 | -------------------------------------------------------------------------------- /example/src/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Footer = () => ( 4 | 7 | ) 8 | 9 | export default Footer -------------------------------------------------------------------------------- /example/src/UsageCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const UsageCard = () => { 4 | const [usageVisible, toggleUsage] = React.useState(false) 5 | 6 | return (<> 7 |
8 |

toggleUsage(!usageVisible)} className='toggle'>How to add this to your React Website {usageVisible ? '🔼' : '🔽'}

9 | {usageVisible && ( 10 |
    11 |
  1. Install the package
    12 | npm install --save react-background-slider 13 |
    2. 14 |
  2. 15 | Add images into your project and import them
    16 | 17 | {`import image1 from './assets/image1.jpg'`}
    18 | {`import image2 from './assets/image2.jpg'`} 19 |     20 |
    3. 21 |
  3. 22 | Add the slider component into your app
    23 | {`import BackgroundSlider from 'react-background-slider'`}

    24 | {``} 27 |
    4. 28 |
  4. Refresh and wow your audience!
    5. 29 |
30 | )} 31 |
32 | ) 33 | } 34 | 35 | export default UsageCard -------------------------------------------------------------------------------- /example/src/assets/github.svg: -------------------------------------------------------------------------------- 1 | GitHub icon -------------------------------------------------------------------------------- /example/src/assets/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/u2ix/react-background-slider/bf8bea312cfbb114967f9f65745ea58d3427ab54/example/src/assets/image1.jpg -------------------------------------------------------------------------------- /example/src/assets/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/u2ix/react-background-slider/bf8bea312cfbb114967f9f65745ea58d3427ab54/example/src/assets/image2.jpg -------------------------------------------------------------------------------- /example/src/assets/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/u2ix/react-background-slider/bf8bea312cfbb114967f9f65745ea58d3427ab54/example/src/assets/image3.jpg -------------------------------------------------------------------------------- /example/src/assets/image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/u2ix/react-background-slider/bf8bea312cfbb114967f9f65745ea58d3427ab54/example/src/assets/image4.jpg -------------------------------------------------------------------------------- /example/src/assets/image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/u2ix/react-background-slider/bf8bea312cfbb114967f9f65745ea58d3427ab54/example/src/assets/image5.jpg -------------------------------------------------------------------------------- /example/src/assets/image6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/u2ix/react-background-slider/bf8bea312cfbb114967f9f65745ea58d3427ab54/example/src/assets/image6.jpg -------------------------------------------------------------------------------- /example/src/assets/npm.svg: -------------------------------------------------------------------------------- 1 | NPM icon -------------------------------------------------------------------------------- /example/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Dosis'); 2 | 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Dosis', sans-serif; 7 | font-size: 18px; 8 | } 9 | 10 | .card-container { 11 | display: flex; 12 | justify-content: center; 13 | align-content: center; 14 | margin-top: 40px; 15 | } 16 | 17 | .card { 18 | display: flex; 19 | flex-direction: column; 20 | justify-content: space-between; 21 | align-items: center; 22 | padding: 30px; 23 | width: 335px; 24 | background-color: rgba(243, 235, 228, 0.80); 25 | border-radius: 1px; 26 | box-shadow: 1px 6px 8px 0px #615f5f2e; 27 | } 28 | 29 | .card.big { 30 | width: 500px; 31 | } 32 | 33 | h1, h2, h3 { margin: 0; } 34 | h3 { 35 | font-size: 1.1em; 36 | } 37 | 38 | header h1 > span { 39 | color: rgba(90, 87, 84, 0.281); 40 | font-size: 0.75em; 41 | } 42 | 43 | header h2 > span, header h3 > span { 44 | font-size: 1.75rem; 45 | visibility: hidden; 46 | } 47 | 48 | header h3 { 49 | font-size: 0.8em; 50 | text-transform: uppercase; 51 | } 52 | 53 | a { 54 | color: #255681; 55 | text-decoration: none; 56 | } 57 | 58 | a.nohighlight { 59 | color: rgba(90, 87, 84, 0.281); 60 | } 61 | 62 | a.upper { 63 | text-transform: uppercase; 64 | } 65 | 66 | a:hover { color: #1b4163; } 67 | 68 | .buttons { 69 | display: flex; 70 | flex-direction: row; 71 | justify-content: space-around; 72 | } 73 | 74 | .buttons > a { 75 | width: 120px; 76 | height: 32px; 77 | display: block; 78 | line-height: 32px; 79 | padding: 6px; 80 | border-radius: 1px; 81 | } 82 | 83 | .buttons > a > img { 84 | width: 32px; 85 | height: 32px; 86 | padding: 0 8px 0 4px; 87 | vertical-align: middle; 88 | } 89 | 90 | 91 | .buttons > a:hover { 92 | box-shadow: 0 0 8px 0px #33313147; 93 | } 94 | 95 | footer { 96 | display: flex; 97 | justify-content: center; 98 | background-color: rgba(243, 235, 228, 0.80); 99 | padding: 2px 0; 100 | margin-top: 20%; 101 | } 102 | 103 | footer > a { 104 | font-size: 0.68em; 105 | } 106 | 107 | code { 108 | font-size: 0.8em; 109 | color: hsl(80,80.5%,26.5%); 110 | } 111 | 112 | .toggle { 113 | padding: 6px 4px; 114 | } 115 | .toggle:hover { 116 | background-color: #255681; 117 | cursor: pointer; 118 | } -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css' 4 | import App from './App' 5 | 6 | const root = createRoot(document.getElementById('root')); 7 | 8 | root.render(); -------------------------------------------------------------------------------- /example/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | export interface BackgroundSliderProps { 4 | images: string[], 5 | duration?: number, 6 | transition?: number 7 | } 8 | 9 | export default function BackgroundSlider(props: BackgroundSliderProps): JSX.Element 10 | -------------------------------------------------------------------------------- /lib/BackgroundSlider.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import generateStyleSheet from './generateStyleSheet' 4 | import injectCss from './injectCss' 5 | 6 | const NAME = 'ReactBackgroundSlider' 7 | 8 | function BackgroundSlider ({ 9 | images, 10 | duration = 10, 11 | transition = 2 12 | }) { 13 | React.useEffect(() => { 14 | injectCss( 15 | generateStyleSheet({ 16 | imagesCount: images.length, 17 | duration, 18 | transition 19 | }), 20 | NAME 21 | ) 22 | }) 23 | 24 | return ( 25 |
26 | {images.map((img, key) => 27 |
34 | )} 35 |
36 | ) 37 | } 38 | 39 | BackgroundSlider.propTypes = { 40 | images: PropTypes.array.isRequired, 41 | duration: PropTypes.number, 42 | transition: PropTypes.number 43 | } 44 | 45 | export default BackgroundSlider 46 | -------------------------------------------------------------------------------- /lib/generateStyleSheet.js: -------------------------------------------------------------------------------- 1 | import * as vendor from 'css-vendor' 2 | 3 | const generateStyleSheet = ({ imagesCount, duration, transition }) => { 4 | const t = imagesCount * (duration + transition) 5 | const p1 = Math.round(transition / t * 100) 6 | const p2 = Math.round((duration + transition) / t * 100) 7 | const p3 = Math.round(p2 * 1.1) 8 | 9 | const vendorBackfaceVisibility = vendor.supportedProperty('backface-visibility') 10 | const vendorAnimation = vendor.supportedProperty('animation') 11 | const vendorKeyframes = vendor.supportedKeyframes('@keyframes') 12 | 13 | let animation = '' 14 | let keyframes = '' 15 | if (vendorAnimation && vendorBackfaceVisibility && vendorKeyframes) { 16 | animation = `${vendorBackfaceVisibility}: hidden; 17 | ${vendorAnimation}: imageAnimation ${t}s linear infinite -0.5s;` 18 | 19 | keyframes = `${vendorKeyframes} imageAnimation { 20 | 0% { 21 | opacity: 0; 22 | animation-timing-function: ease-in; 23 | } 24 | ${p1}% { 25 | opacity: 1; 26 | animation-timing-function: ease-out; 27 | } 28 | ${p2}% { 29 | opacity: 1; 30 | } 31 | ${p3}% { 32 | opacity: 0 33 | } 34 | 100% { 35 | opacity: 0 36 | } 37 | }` 38 | } 39 | 40 | return `#ReactBackgroundSlider > figure { 41 | height: 100%; 42 | width: 100%; 43 | position: fixed; 44 | top: 0px; 45 | left: 0px; 46 | color: transparent; 47 | background-size: cover; 48 | background-position: center center; 49 | background-repeat: no-repeat; 50 | opacity: 0; 51 | z-index: -1000; 52 | margin: 0; 53 | ${animation} 54 | } 55 | ${keyframes} 56 | ` 57 | } 58 | 59 | export default generateStyleSheet 60 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | import BackgroundSlider from './BackgroundSlider' 2 | 3 | export default BackgroundSlider 4 | -------------------------------------------------------------------------------- /lib/injectCss.js: -------------------------------------------------------------------------------- 1 | const injectCss = (css, meta) => { 2 | const head = document.getElementsByTagName('head')[0] 3 | const style = document.createElement('style') 4 | style.setAttribute('type', 'text/css') 5 | style.setAttribute('data-meta', meta) 6 | if (style.styleSheet) { 7 | style.styleSheet.cssText = css 8 | } else { 9 | style.appendChild(document.createTextNode(css)) 10 | } 11 | head.appendChild(style) 12 | } 13 | 14 | export default injectCss 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-background-slider", 3 | "version": "4.0.0", 4 | "description": "Simply beautiful react background slideshow", 5 | "main": "dist/index.js", 6 | "module": "lib/index.js", 7 | "typings": "index.d.ts", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/u2ix/react-background-slider.git" 11 | }, 12 | "author": "Demian Gemperli", 13 | "license": "MIT", 14 | "scripts": { 15 | "start": "webpack-dev-server --config ./webpack.demo.config.ts", 16 | "build": "webpack --mode=production --config ./webpack.lib.config.ts", 17 | "build:demo": "webpack --mode=production --config ./webpack.demo.config.ts", 18 | "test": "start-server-and-test start http-get://localhost:9000 cy:run", 19 | "cy:run": "cypress run", 20 | "lint": "standard" 21 | }, 22 | "devDependencies": { 23 | "@babel/cli": "^7.18.10", 24 | "@babel/core": "^7.18.13", 25 | "@babel/preset-env": "^7.18.10", 26 | "@babel/preset-react": "^7.18.6", 27 | "@types/copy-webpack-plugin": "^10.1.0", 28 | "@types/node": "^20.12.2", 29 | "@types/react": "^18.0.17", 30 | "@types/webpack": "^5.28.0", 31 | "@types/webpack-dev-server": "^4.7.1", 32 | "babel-loader": "^9.1.3", 33 | "clean-webpack-plugin": "^4.0.0", 34 | "copy-webpack-plugin": "^12.0.2", 35 | "css-loader": "^6.7.1", 36 | "cypress": "^13.7.1", 37 | "file-loader": "^6.2.0", 38 | "html-webpack-plugin": "^5.5.0", 39 | "react": "^18.2.0", 40 | "react-dom": "^18.2.0", 41 | "standard": "^17.0.0", 42 | "start-server-and-test": "^2.0.3", 43 | "style-loader": "^3.3.1", 44 | "svg-inline-loader": "^0.8.2", 45 | "ts-node": "^10.9.1", 46 | "typescript": "^5.4.3", 47 | "webpack": "^5.74.0", 48 | "webpack-cli": "^5.1.4", 49 | "webpack-dev-server": "^5.0.4", 50 | "webpack-node-externals": "^3.0.0" 51 | }, 52 | "peerDependencies": { 53 | "react": "^18.2.0", 54 | "react-dom": "^18.2.0" 55 | }, 56 | "dependencies": { 57 | "css-vendor": "^2.0.8", 58 | "prop-types": "^15.8.1" 59 | }, 60 | "standard": { 61 | "ignore": [ 62 | "/example/", 63 | "/cypress/" 64 | ] 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "esModuleInterop": true, 6 | } 7 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | entry: path.resolve(__dirname, 'lib/index.js'), 5 | output: { 6 | path: path.resolve(__dirname, 'dist/'), 7 | filename: 'index.js', 8 | library: '', 9 | libraryTarget: 'commonjs2' 10 | }, 11 | externals: { 12 | react: 'react' 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.js$/, 18 | exclude: /(node_modules|bower_components)/, 19 | loader: 'babel-loader', 20 | options: { 21 | presets: ['@babel/preset-env', '@babel/react'] 22 | } 23 | }, 24 | { 25 | test: /\.css$/, 26 | use: ['style-loader', 'css-loader'] 27 | } 28 | ] 29 | }, 30 | resolve: { 31 | extensions: ['.js'] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /webpack.demo.config.ts: -------------------------------------------------------------------------------- 1 | import webpack from 'webpack' 2 | import path from 'path' 3 | import HtmlWebpackPlugin from 'html-webpack-plugin' 4 | import { CleanWebpackPlugin } from 'clean-webpack-plugin' 5 | import CopyPlugin from 'copy-webpack-plugin' 6 | import type { Configuration as DevServerConfiguration } from "webpack-dev-server"; 7 | 8 | const devServer: DevServerConfiguration = { 9 | port: 9000, 10 | }; 11 | 12 | const exampleConfig: webpack.Configuration = { 13 | mode: 'development', 14 | entry: path.resolve(__dirname, 'example/src/index.js'), 15 | output: { 16 | path: path.resolve(__dirname, 'dist-example/'), 17 | filename: 'index.js', 18 | }, 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.js$/, 23 | exclude: /(node_modules|bower_components)/, 24 | loader: 'babel-loader', 25 | options: { 26 | presets: ['@babel/preset-env', '@babel/react'] 27 | } 28 | }, 29 | { 30 | test: /\.css$/, 31 | use: ['style-loader', 'css-loader'] 32 | }, 33 | { 34 | test: /\.(png|jpe?g|gif|svg)$/i, 35 | use: [ 36 | { 37 | loader: 'file-loader', 38 | }, 39 | ], 40 | }, 41 | ] 42 | }, 43 | plugins: [ 44 | new CleanWebpackPlugin(), 45 | new HtmlWebpackPlugin({ 46 | template: path.resolve(__dirname, 'example/public/index.html') 47 | }), 48 | new CopyPlugin({ 49 | patterns: [ 50 | { from: 'example/public/favicon.ico', to: 'favicon.ico' }, 51 | { from: 'example/public/favicon.png', to: 'favicon.png' }, 52 | { from: 'example/public/manifest.json', to: 'manifest.json' }, 53 | ]}) 54 | ], 55 | devServer, 56 | } 57 | 58 | export default exampleConfig 59 | -------------------------------------------------------------------------------- /webpack.lib.config.ts: -------------------------------------------------------------------------------- 1 | import webpack from 'webpack' 2 | import path from 'path' 3 | import { CleanWebpackPlugin } from 'clean-webpack-plugin' 4 | 5 | const libraryConfig: webpack.Configuration = { 6 | entry: path.resolve(__dirname, 'lib/index.js'), 7 | output: { 8 | path: path.resolve(__dirname, 'dist/'), 9 | filename: 'index.js', 10 | globalObject: 'this', 11 | library: { 12 | name: 'react-background-slider', 13 | type: 'umd', 14 | } 15 | }, 16 | externals: { 17 | 'react': { 18 | root: 'React', 19 | commonjs2: 'react', 20 | commonjs: 'react', 21 | amd: 'react' 22 | } 23 | }, 24 | module: { 25 | rules: [ 26 | { 27 | test: /\.js$/, 28 | exclude: /(node_modules|bower_components)/, 29 | loader: 'babel-loader', 30 | options: { 31 | presets: ['@babel/preset-env', '@babel/react'] 32 | } 33 | }, 34 | { 35 | test: /\.css$/, 36 | use: ['style-loader', 'css-loader'] 37 | }, 38 | ] 39 | }, 40 | plugins: [ 41 | new CleanWebpackPlugin() 42 | ], 43 | resolve: { 44 | extensions: ['.js'] 45 | } 46 | } 47 | 48 | export default libraryConfig 49 | --------------------------------------------------------------------------------