diff --git a/.eslintrc.json b/.eslintrc.json
index af9a4f5a..e5f74dbb 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -31,7 +31,8 @@
     },
     "import/resolver": {
       "alias": {
-        "map": [["src", "./src"]]
+        "map": [["src", "./src"]],
+        "extensions": [".ts", ".js", ".jsx", ".json"]
       }
     }
   },
diff --git a/README.md b/README.md
index 959805bd..39523dab 100644
--- a/README.md
+++ b/README.md
@@ -176,7 +176,7 @@ class MyGallery extends React.Component {
   - As a prop passed into `ImageGallery` to completely override `_renderThumbInner`, see source for reference
 
 - `renderLeftNav`: Function, custom left nav component
-  - See [`<LeftNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/LeftNav.js)
+  - See [`<LeftNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/LeftNav.js)
   - Use this to render a custom left nav control
   - Args:
     - `onClick` callback that will slide to the previous item
@@ -187,7 +187,7 @@ class MyGallery extends React.Component {
   );
   ```
 - `renderRightNav`: Function, custom right nav component
-  - See [`<RightNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/RightNav.js)
+  - See [`<RightNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/RightNav.js)
   - Use this to render a custom right nav control
   - Args:
     - `onClick` callback that will slide to the next item
@@ -198,7 +198,7 @@ class MyGallery extends React.Component {
   );
   ```
 - `renderPlayPauseButton`: Function, play pause button component
-  - See [`<PlayPause />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/PlayPause.js)
+  - See [`<PlayPause />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/PlayPause.js)
   - Use this to render a custom play pause button
   - Args:
     - `onClick` callback that will toggle play/pause
@@ -209,7 +209,7 @@ class MyGallery extends React.Component {
   );
   ```
 - `renderFullscreenButton`: Function, custom fullscreen button component
-  - See [`<Fullscreen />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/Fullscreen.js)
+  - See [`<Fullscreen />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/Fullscreen.js)
   - Use this to render a custom fullscreen button
   - Args:
     - `onClick` callback that will toggle fullscreen
diff --git a/example/app.js b/example/App.jsx
similarity index 99%
rename from example/app.js
rename to example/App.jsx
index d2ff522c..1139c353 100644
--- a/example/app.js
+++ b/example/App.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 
-import ImageGallery from "src/ImageGallery";
+import ImageGallery from "src/components/ImageGallery";
 
 const PREFIX_URL =
   "https://raw.githubusercontent.com/xiaolin/react-image-gallery/master/static/";
diff --git a/src/ImageGallery.js b/src/components/ImageGallery.jsx
similarity index 99%
rename from src/ImageGallery.js
rename to src/components/ImageGallery.jsx
index 488ec067..76dd5e8b 100644
--- a/src/ImageGallery.js
+++ b/src/components/ImageGallery.jsx
@@ -6,12 +6,12 @@ import isEqual from "react-fast-compare";
 import ResizeObserver from "resize-observer-polyfill";
 import { LEFT, RIGHT, UP, DOWN } from "react-swipeable";
 import { arrayOf, bool, func, number, oneOf, shape, string } from "prop-types";
-import Item from "src/Item";
-import Fullscreen from "src/controls/Fullscreen";
-import LeftNav from "src/controls/LeftNav";
-import RightNav from "src/controls/RightNav";
-import PlayPause from "src/controls/PlayPause";
-import SwipeWrapper from "src/SwipeWrapper";
+import Item from "src/components/Item";
+import Fullscreen from "src/components/controls/Fullscreen";
+import LeftNav from "src/components/controls/LeftNav";
+import RightNav from "src/components/controls/RightNav";
+import PlayPause from "src/components/controls/PlayPause";
+import SwipeWrapper from "src/components/SwipeWrapper";
 
 const screenChangeEvents = [
   "fullscreenchange",
diff --git a/src/__tests__/ImageGallery.test.js b/src/components/ImageGallery.test.js
similarity index 91%
rename from src/__tests__/ImageGallery.test.js
rename to src/components/ImageGallery.test.js
index f24c5655..cefad79f 100644
--- a/src/__tests__/ImageGallery.test.js
+++ b/src/components/ImageGallery.test.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 
-import ImageGallery from "../ImageGallery";
+import ImageGallery from "./ImageGallery";
 
 describe("<ImageGallery />", () => {
   const defaultProps = {
diff --git a/src/Item.js b/src/components/Item.jsx
similarity index 100%
rename from src/Item.js
rename to src/components/Item.jsx
diff --git a/src/SVG.js b/src/components/SVG.jsx
similarity index 100%
rename from src/SVG.js
rename to src/components/SVG.jsx
diff --git a/src/SwipeWrapper.js b/src/components/SwipeWrapper.jsx
similarity index 100%
rename from src/SwipeWrapper.js
rename to src/components/SwipeWrapper.jsx
diff --git a/src/controls/Fullscreen.js b/src/components/controls/Fullscreen.jsx
similarity index 93%
rename from src/controls/Fullscreen.js
rename to src/components/controls/Fullscreen.jsx
index 3fde6e45..753469ca 100644
--- a/src/controls/Fullscreen.js
+++ b/src/components/controls/Fullscreen.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { bool, func } from "prop-types";
-import SVG from "src/SVG";
+import SVG from "src/components/SVG";
 
 const Fullscreen = React.memo(({ isFullscreen, onClick }) => {
   return (
diff --git a/src/controls/LeftNav.js b/src/components/controls/LeftNav.jsx
similarity index 93%
rename from src/controls/LeftNav.js
rename to src/components/controls/LeftNav.jsx
index a2a864c6..88a64e63 100644
--- a/src/controls/LeftNav.js
+++ b/src/components/controls/LeftNav.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { bool, func } from "prop-types";
-import SVG from "src/SVG";
+import SVG from "src/components/SVG";
 
 const LeftNav = React.memo(({ disabled, onClick }) => {
   return (
diff --git a/src/controls/PlayPause.js b/src/components/controls/PlayPause.jsx
similarity index 93%
rename from src/controls/PlayPause.js
rename to src/components/controls/PlayPause.jsx
index a9d03f12..80b7881e 100644
--- a/src/controls/PlayPause.js
+++ b/src/components/controls/PlayPause.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { bool, func } from "prop-types";
-import SVG from "src/SVG";
+import SVG from "src/components/SVG";
 
 const PlayPause = React.memo(({ isPlaying, onClick }) => {
   return (
diff --git a/src/controls/RightNav.js b/src/components/controls/RightNav.jsx
similarity index 93%
rename from src/controls/RightNav.js
rename to src/components/controls/RightNav.jsx
index f36aed27..54280e3d 100644
--- a/src/controls/RightNav.js
+++ b/src/components/controls/RightNav.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { bool, func } from "prop-types";
-import SVG from "src/SVG";
+import SVG from "src/components/SVG";
 
 const RightNav = React.memo(({ disabled, onClick }) => {
   return (
diff --git a/webpack.build.js b/webpack.build.js
index 225a82ab..797916a4 100644
--- a/webpack.build.js
+++ b/webpack.build.js
@@ -1,57 +1,56 @@
-
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const RemovePlugin = require('remove-files-webpack-plugin');
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const RemovePlugin = require("remove-files-webpack-plugin");
 
 const config = {
-  mode: 'production',
+  mode: "production",
 };
 
 const jsOutput = Object.assign({}, config, {
-  entry: [ './src/ImageGallery.js', ],
+  entry: ["./src/components/ImageGallery.jsx"],
   output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: 'image-gallery.js',
-    library: 'ImageGallery',
-    globalObject: 'this',
-    libraryTarget: 'umd',
+    path: path.resolve(__dirname, "build"),
+    filename: "image-gallery.js",
+    library: "ImageGallery",
+    globalObject: "this",
+    libraryTarget: "umd",
   },
   resolve: {
     alias: {
-      src: path.resolve(__dirname, 'src/'),
+      src: path.resolve(__dirname, "src/"),
     },
-    extensions: ['.js']
+    extensions: [".js", ".jsx"],
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
-      }
-    ]
+        loader: "babel-loader",
+      },
+    ],
   },
   externals: {
     // Don't bundle react or react-dom
     react: {
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'react',
-      root: 'React',
+      commonjs: "react",
+      commonjs2: "react",
+      amd: "react",
+      root: "React",
     },
-    'react-dom': {
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
-      amd: 'react-dom',
-      root: 'ReactDOM',
+    "react-dom": {
+      commonjs: "react-dom",
+      commonjs2: "react-dom",
+      amd: "react-dom",
+      root: "ReactDOM",
     },
   },
 });
 
 const cssOutput = Object.assign({}, config, {
-  entry: './styles/scss/image-gallery.scss',
+  entry: "./styles/scss/image-gallery.scss",
   output: {
-    path: path.resolve(__dirname, 'styles/css'),
+    path: path.resolve(__dirname, "styles/css"),
   },
   module: {
     rules: [
@@ -60,16 +59,16 @@ const cssOutput = Object.assign({}, config, {
         use: [
           MiniCssExtractPlugin.loader,
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
-      }
-    ]
+      },
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'image-gallery.css',
+      filename: "image-gallery.css",
     }),
     new RemovePlugin({
       /**
@@ -78,36 +77,36 @@ const cssOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'styles/css',
+            folder: "styles/css",
             method: (absoluteItemPath) => {
-              return new RegExp(/\.js$/, 'm').test(absoluteItemPath);
+              return new RegExp(/\.js$/, "m").test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });
 
 const jsDemoOutput = Object.assign({}, config, {
-  entry: [ './example/app.js', ],
+  entry: ["./example/App.jsx"],
   output: {
-    path: path.resolve(__dirname, 'demo'),
-    filename: 'demo.mini.js',
+    path: path.resolve(__dirname, "demo"),
+    filename: "demo.mini.js",
   },
   resolve: {
     alias: {
-      src: path.resolve(__dirname, 'src/'),
+      src: path.resolve(__dirname, "src/"),
     },
-    extensions: ['.js']
+    extensions: [".js", ".jsx"],
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
-        loader: 'babel-loader',
-      }
-    ]
+        test: /\.(js|jsx)$/,
+        loader: "babel-loader",
+      },
+    ],
   },
   plugins: [
     new RemovePlugin({
@@ -117,21 +116,21 @@ const jsDemoOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'demo',
+            folder: "demo",
             method: (absoluteItemPath) => {
               return new RegExp(/\.txt$/).test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });
 
 const cssDemoOutput = Object.assign({}, config, {
-  entry: ['./styles/scss/image-gallery.scss', './example/app.css'],
+  entry: ["./styles/scss/image-gallery.scss", "./example/App.css"],
   output: {
-    path: path.resolve(__dirname, 'demo'),
+    path: path.resolve(__dirname, "demo"),
   },
   module: {
     rules: [
@@ -140,16 +139,16 @@ const cssDemoOutput = Object.assign({}, config, {
         use: [
           MiniCssExtractPlugin.loader,
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
-      }
-    ]
+      },
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'demo.mini.css',
+      filename: "demo.mini.css",
     }),
     new RemovePlugin({
       /**
@@ -158,13 +157,13 @@ const cssDemoOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'demo',
+            folder: "demo",
             method: (absoluteItemPath) => {
               return new RegExp(/\.js$/).test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });
diff --git a/webpack.config.js b/webpack.config.js
index b359b75e..2e8f59a2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,8 +3,8 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
   entry: [
-    "./example/app.js",
-    "./example/app.css",
+    "./example/App.jsx",
+    "./example/App.css",
     "./styles/scss/image-gallery.scss",
   ],
   output: {
@@ -13,7 +13,7 @@ module.exports = {
     publicPath: "/dist/",
   },
   resolve: {
-    extensions: [".js"],
+    extensions: [".js", ".jsx"],
     alias: {
       src: path.resolve(__dirname, "src/"),
     },