()
const setState = useCallback(() => {
- const containerWidth = container.current.clientWidth
- const marqueeWidth = marquee.current.clientWidth
+ const containerWidth = container.current?.clientWidth || 0
+ const marqueeWidth = marquee.current?.clientWidth || 0
// If prefersReducedMotion, replace speed with reducedMotionSpeed
const speedAmount = prefersReducedMotion ? reducedMotionSpeed : speed
@@ -69,7 +80,7 @@ export function Marquee({
const marquees = useMemo(() => {
// For each marquee needed to fill the extra space, we pushed the below markup
// to an empty array and run the getMarquees function below to render them.
- let marquees = []
+ const marquees = []
for (let index = 0; index < neededAmount; index++) {
marquees.push(
@@ -85,7 +96,7 @@ export function Marquee({
useEffect(() => {
setState()
- const { current } = container
+ const { current } = resizeTimer
const handleResize = () => {
if (current) clearTimeout(current)
@@ -108,11 +119,13 @@ export function Marquee({
{...props}
ref={container}
className={classnames(["marquee", marqueeWidth > 0 && "marquee--ready", className])}
- style={{
- "--marquee-width": marqueeWidth,
- "--duration": duration + `s`,
- "--animation-state": playing ? "running" : "paused",
- }}
+ style={
+ {
+ "--marquee-width": marqueeWidth,
+ "--duration": duration + `s`,
+ "--animation-state": playing ? "running" : "paused",
+ } as React.CSSProperties
+ }
>
{children}
@@ -122,12 +135,3 @@ export function Marquee({
)
}
-
-Marquee.propTypes = {
- prefersReducedMotion: PropTypes.bool,
- playing: PropTypes.bool,
- className: PropTypes.string,
- speed: PropTypes.number,
- reducedMotionSpeed: PropTypes.number,
- children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-}
diff --git a/src/lib/utils/classnames.js b/src/lib/utils/classnames.js
deleted file mode 100644
index 1603cf0e..00000000
--- a/src/lib/utils/classnames.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export function classnames(classes) {
- if (!classes) return null
- if (typeof classes === "string") return classes.trim()
- if (!Array.isArray(classes)) return null
-
- return classes
- .flat()
- .filter((c) => typeof c === "string")
- .join(" ")
-}
diff --git a/src/lib/utils/classnames.ts b/src/lib/utils/classnames.ts
new file mode 100644
index 00000000..b5e4c0e9
--- /dev/null
+++ b/src/lib/utils/classnames.ts
@@ -0,0 +1,13 @@
+type ClassValue = string | undefined | boolean | ClassValue[]
+
+export function classnames(classes: ClassValue[] = []): string | undefined {
+ if (!classes || !Array.isArray(classes) || !classes.length) return undefined
+
+ const output: string[] = []
+
+ classes.forEach((arg) => {
+ if (typeof arg === "string") output.push(arg)
+ })
+
+ return output.flat().join(" ")
+}
diff --git a/src/main.jsx b/src/main.jsx
deleted file mode 100644
index 8d71805c..00000000
--- a/src/main.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { StrictMode } from "react"
-import { createRoot } from "react-dom/client"
-
-import { Marquee } from "./lib"
-
-function App() {
- return (
- <>
- Default
-
-
- Paused
-
-
- )
-}
-
-function Slide() {
- return (
- <>
- 
- 
- 
-
- )
-}
-
-const container = document.getElementById("root")
-const root = createRoot(container)
-
-root.render(
-
-
-
-)
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 00000000..22ec7b7b
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,36 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+
+import { Marquee } from "./lib"
+
+function App() {
+ return (
+ <>
+ Default
+
+
+ Paused
+
+
+ )
+}
+
+function Slide() {
+ return (
+ <>
+ 
+ 
+ 
+
+ )
+}
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+)
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..1f1107d7
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "types"]
+}
diff --git a/vite.config.js b/vite.config.ts
similarity index 68%
rename from vite.config.js
rename to vite.config.ts
index af7237e0..9ad9b6dc 100644
--- a/vite.config.js
+++ b/vite.config.ts
@@ -1,26 +1,29 @@
import { defineConfig } from "vite"
import { resolve } from "path"
import react from "@vitejs/plugin-react-swc"
+import dts from "vite-plugin-dts"
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [react(), dts({ rollupTypes: true, include: ["src/lib"] })],
build: {
lib: {
// Could also be a dictionary or array of multiple entry points
// eslint-disable-next-line no-undef
- entry: resolve(__dirname, "src/lib/index.js"),
+ entry: resolve(__dirname, "src/lib/index.ts"),
name: "ReactMarquee",
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
- external: ["react", "react-dom"],
+ external: ["react", "react-dom", "react/jsx-runtime"],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
react: "React",
+ "react-dom": "ReactDOM",
+ "react/jsx-runtime": "jsxRuntime",
},
},
},