Skip to content

Commit 4040fb9

Browse files
kevinfarrugiakevinfarrugia
authored
Merge pull request #169 from kevinfarrugia/react-19
Added support for React v19
2 parents 95d16fa + b3848a8 commit 4040fb9

25 files changed

+259
-282
lines changed

‎.eslintrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"airbnb",
44
"prettier",
55
"plugin:react-hooks/recommended",
6-
"plugin:@typescript-eslint/recommended"
6+
"plugin:@typescript-eslint/recommended",
7+
"plugin:react/jsx-runtime"
78
],
89
"globals": { "document": true, "window": true, "Glider": true },
910
"parser": "@typescript-eslint/parser",

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ arrows={{
126126
}}
127127
```
128128

129-
When using `React.useRef`:
129+
When using `useRef`:
130130

131131
```jsx
132132
arrows={{
@@ -135,7 +135,7 @@ arrows={{
135135
}}
136136
```
137137

138-
_Note that `React.useRef` will assign a value to `current` after the component has rendered. This means that on the first render, `current` is null._
138+
_Note that `useRef` will assign a value to `current` after the component has rendered. This means that on the first render, `current` is null._
139139

140140
### Responsive mode
141141

@@ -198,7 +198,7 @@ To get access to the current glider instance this react component exposes a ref.
198198

199199
```tsx
200200
function Example() {
201-
const gliderRef = React.useRef<GliderMethods>(null);
201+
const gliderRef = useRef<GliderMethods>(null);
202202
return (
203203
<div>
204204
<button

‎docs/app.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import * as React from "react";
1+
import { StrictMode } from "react";
22
import Demos from "./demos";
33

44
function App() {
55
return (
6-
<React.StrictMode>
6+
<StrictMode>
77
<div className="app">
88
<Demos />
99
</div>
10-
</React.StrictMode>
10+
</StrictMode>
1111
);
1212
}
1313

‎docs/demos.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
import DynamicDataGlider from "../examples/dynamicDataGlider";
42
import SingleItemGlider from "../examples/singleItemGlider";
53
import MultipleItemsGlider from "../examples/multipleItemsGlider";

‎docs/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import * as React from "react";
21
import { createRoot } from "react-dom/client";
32
import App from "./app";
43

5-
const root = createRoot(document.getElementById("app"));
4+
const root = createRoot(document.getElementById("app") as Element);
65
root.render(<App />);

‎examples/autoplayGlider.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1+
import { useCallback, useEffect, useRef } from "react";
12
import GliderType from "glider-js";
2-
import * as React from "react";
33

44
import Glider from "../src";
55

66
function AutoplayGlider() {
77
const INTERVAL = 5000;
88
const MAX = 11;
99

10-
const intervalRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
10+
const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null);
1111

12-
const callbackRef = React.useCallback((glider: GliderType) => {
12+
const callbackRef = useCallback((glider: GliderType) => {
1313
if (glider) {
1414
if (!intervalRef.current) {
1515
intervalRef.current = setInterval(() => {
@@ -25,7 +25,7 @@ function AutoplayGlider() {
2525
}
2626
}, []);
2727

28-
React.useEffect(
28+
useEffect(
2929
() => () => {
3030
if (intervalRef.current) {
3131
clearInterval(intervalRef.current);
@@ -85,9 +85,9 @@ function AutoplayGlider() {
8585
<details>
8686
<summary>View Source Code</summary>
8787
<pre>
88-
<code>{`const intervalRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
88+
<code>{`const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null);
8989
90-
const callbackRef = React.useCallback((glider: GliderType) => {
90+
const callbackRef = useCallback((glider: GliderType) => {
9191
if (glider) {
9292
if (!intervalRef.current) {
9393
intervalRef.current = setInterval(() => {
@@ -103,7 +103,7 @@ const callbackRef = React.useCallback((glider: GliderType) => {
103103
}
104104
}, []);
105105
106-
React.useEffect(
106+
useEffect(
107107
() => () => {
108108
if (intervalRef.current) {
109109
clearInterval(intervalRef.current);

‎examples/customElementArrows.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
import * as React from "react";
2-
1+
import { useCallback, useRef, useState } from "react";
32
import Glider from "../src";
43

54
function CustomElementArrowsGlider() {
6-
const leftArrowEl = React.useRef<HTMLElement | null>(null);
7-
const rightArrowEl = React.useRef<HTMLElement | null>(null);
8-
const [isReady, setIsReady] = React.useState(false);
5+
const leftArrowEl = useRef<HTMLElement | null>(null);
6+
const rightArrowEl = useRef<HTMLElement | null>(null);
7+
const [isReady, setIsReady] = useState(false);
98

10-
const leftArrowCallbackRef = React.useCallback((element) => {
9+
const leftArrowCallbackRef = useCallback((element: HTMLElement | null) => {
1110
leftArrowEl.current = element;
1211
setIsReady(Boolean(leftArrowEl.current && rightArrowEl.current));
1312
}, []);
1413

15-
const rightArrowCallbackRef = React.useCallback((element) => {
14+
const rightArrowCallbackRef = useCallback((element: HTMLElement | null) => {
1615
rightArrowEl.current = element;
1716
setIsReady(Boolean(leftArrowEl.current && rightArrowEl.current));
1817
}, []);

‎examples/customEvents.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
/* eslint-disable no-console */
2-
import * as React from "react";
32

43
import Glider from "../src";
54

‎examples/dynamicDataGlider.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import * as React from "react";
2-
1+
import { useState } from "react";
32
import Glider from "../src";
43

54
function DynamicDataGlider() {
6-
const [data, setData] = React.useState([1, 2, 3, 4, 5, 6]);
5+
const [data, setData] = useState([1, 2, 3, 4, 5, 6]);
76

87
return (
98
<div className="container">

‎examples/fractionalSlidesGlider.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
import Glider from "../src";
42

53
function FractionalSlidesGlider() {

‎examples/gliderMethods.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import * as React from "react";
2-
1+
import { useRef } from "react";
32
import Glider from "../src";
43
import { GliderMethods } from "../src/types";
54

65
function RefGlider() {
7-
const gliderRef = React.useRef<GliderMethods>(null);
6+
const gliderRef = useRef<GliderMethods>(null);
87
return (
98
<div className="container">
109
<button
@@ -64,7 +63,7 @@ function RefGlider() {
6463
<details>
6564
<summary>View Source Code</summary>
6665
<pre>
67-
<code>{`const gliderRef = React.useRef<GliderMethods>(null);
66+
<code>{`const gliderRef = useRef<GliderMethods>(null);
6867
6968
return (
7069
<button

‎examples/multipleItemsGlider.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
import Glider from "../src";
42

53
function MultipleItemsGlider() {

‎examples/perspectiveViewGlider.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
import Glider from "../src";
42

53
function PerspectiveViewGlider() {

‎examples/remounting.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import * as React from "react";
2-
1+
import { useState } from "react";
32
import Glider from "../src";
43

54
function RemountingGlider() {
6-
const [isVisible, setIsVisible] = React.useState(false);
5+
const [isVisible, setIsVisible] = useState(false);
76

87
return (
98
<div className="container">

‎examples/responsiveGlider.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
import Glider from "../src";
42

53
function ResponsiveGlider() {

‎examples/scrollToGlider.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
import Glider from "../src";
42

53
function ScrollToGlider() {

‎examples/singleItemGlider.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
import Glider from "../src";
42

53
function SingleItemGlider() {

‎examples/skipTrackGlider.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
import Glider from "../src";
42

53
function SkipTrackGlider() {

‎examples/updatingProps.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import * as React from "react";
2-
1+
import { useState } from "react";
32
import Glider from "../src";
43

54
function UpdatingPropsGlider() {
6-
const [slidesToShow, setSlidesToShow] = React.useState(1);
5+
const [slidesToShow, setSlidesToShow] = useState(1);
76

87
return (
98
<div className="container">

‎package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"@babel/preset-typescript": "^7.18.6",
4040
"@types/glider-js": "^1.7.6",
4141
"@types/jest": "^29.1.2",
42-
"@types/react": "^18.0.21",
42+
"@types/react": "^19.0.0",
4343
"@typescript-eslint/eslint-plugin": "^5.39.0",
4444
"@typescript-eslint/parser": "^5.39.0",
4545
"babel-core": "^6.26.3",
@@ -61,8 +61,8 @@
6161
"lint-staged": "^13.0.3",
6262
"mkdirp": "^1.0.4",
6363
"prettier": "^2.7.1",
64-
"react": "^18.2.0",
65-
"react-dom": "^18.2.0",
64+
"react": "^19.0.0",
65+
"react-dom": "^19.0.0",
6666
"style-loader": "^3.3.1",
6767
"ts-jest": "^29.0.3",
6868
"typescript": "^4.8.4",
@@ -71,11 +71,12 @@
7171
"webpack-dev-server": "^4.11.1"
7272
},
7373
"dependencies": {
74+
"@types/react-dom": "^19.0.0",
7475
"glider-js": "^1.7.7"
7576
},
7677
"peerDependencies": {
77-
"react": "^18.0.0",
78-
"react-dom": "^18.0.0"
78+
"react": "^19.0.0",
79+
"react-dom": "^19.0.0"
7980
},
8081
"husky": {
8182
"hooks": {

0 commit comments

Comments
 (0)